절대적이지만 상위에 상대적인 위치

절대적이지만 상위에 상대적인 위치

저는 다른 div 안에 두 개의 div가 있는데, 저는 css를 사용하여 한 아이 div를 부모 div의 오른쪽 위에, 다른 아이 div를 부모 div의 아래에 위치시키고 싶습니다.즉, 두 개의 자식 div에 절대 위치 지정을 사용하고 싶지만 페이지보다는 부모 div에 상대적으로 위치 지정을 합니다.어떻게 해야 하나요?

샘플 html:

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

#father {
   position: relative;
}
    
#son1 {
   position: absolute;
   top: 0;
}
  
#son2 {
   position: absolute;
   bottom: 0;
}

이는 다음과 같은 이유로 작동합니다.position: absolute"사용"과 같은 것을 의미합니다.top,right,bottom,left가장 가까운 조상과 관련하여 자신의 위치를 정하다position: absolute또는position: relative."

그래서 저희가.#father갖고 있다position: relative그리고 아이들은.position: absolute그 다음에 사용top그리고.bottom아이들을 배치하는 것.

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

누군가 부모 바로 아래에 아동 디브를 게시하고 싶어하는 경우.

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

작업 데모 코드펜

부모에게 어떤 위치도 주지 않으면 기본적으로 필요합니다.static그 차이를 이해하고 싶다면 이 예를 참조하십시오.

예 1:

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

여기서 부모 클래스에는 위치가 없으므로 요소가 본문에 따라 배치됩니다.

예 2:

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

이 예에서 부모는 상대적 위치를 가지므로 요소는 상대적 부모 내부에 절대적으로 위치합니다.

고정 부동 "뒤로 버튼"/ "위로 돌아가기" 버튼이 필요한 경우.그러나 사이드 콘텐츠 영역을 선호하여 축소할 수 있는 주요 콘텐츠 영역이 있습니다.

사용할 수 있습니다.position: fixed;의 용기 안에.position: absolute;유사한 보다 유연한 행동을 취하기 위해sticky하지만 더 강력한

function toggleOpen() {
  const element = document.getElementById("sideContnet");
  if (element.style.display === "none") {
    element.style.display = "block";
  } else {
    element.style.display = "none";
  }
}

.container {
  display: flex;
  margin: 0 auto;
    width: 600px;
}

.contentBig {
  width: 600px;
  min-width: 66%;
  position: relative;
  
}
.contentSmall {
  width: 230px;
  min-width: 33%;
}

.absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
}

.fiexBack {
  position: fixed;
  background-color: red;
  bottom: 20px;
  padding: 5px;
}

.button {
  width: 200px;
  padding: 12px;
  background-color: coral;
  margin: 0 auto;
}

<button onclick="toggleOpen()" id="toggleSide" class="button">
  toggle open side content
</button>
<div class="container">
  <div class="contentBig">
    <div class="absolute">
      <div class="fiexBack">Back</div>
  </div>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
<p>
Curabitur auctor ipsum ac interdum accumsan. Sed quis arcu mauris. Maecenas nibh ligula, tristique rhoncus pharetra vel, blandit non lectus. Suspendisse orci felis, faucibus sit amet rhoncus eu, ullamcorper et nulla. Ut in leo eu risus dignissim tempus sed sit amet leo. Etiam pulvinar lectus tincidunt turpis viverra maximus. Donec rutrum rutrum dui sit amet congue.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
  </div>
   <div id="sideContnet" class="contentSmall">
    <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula est at pretium venenatis. Morbi mauris justo, viverra non velit sit amet, accumsan cursus nisi. Pellentesque ut vulputate sem. Etiam sit amet quam diam. Nulla vel sodales est. Quisque sed accumsan urna. Ut tristique efficitur ante a congue. Cras elementum dignissim tellus, in rhoncus ex faucibus nec. Sed vitae mi eu leo interdum aliquam. Donec eleifend nisl sem, a tincidunt velit commodo sit amet. Nulla ex eros, tempor in fringilla ut, accumsan ac augue. Curabitur aliquet venenatis massa, ornare viverra lorem varius interdum.
     </p>
<p>
Morbi leo nulla, varius nec dignissim quis, vestibulum quis mi. Sed dignissim lobortis magna. Ut erat nisl, varius id finibus at, faucibus scelerisque justo. Donec viverra purus eu ante volutpat iaculis. Donec vehicula ullamcorper urna ut egestas. Curabitur convallis at risus vitae fermentum. Nullam arcu ante, faucibus quis neque vel, pulvinar blandit est.
     </p>
  </div>
</div>

전체 코드 예제

언급URL : https://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent