상대적으로 배치 된 요소는 절대적으로 어떻게 배치합니까?

Question

컨테이너가 있고이 컨테이너를 아직 넣고 싶다고 가정 해 봅시다 또 다른 컨테이너에도 다른 것들이 가득차 있습니다. CSS 코드는 다음과 같이 보일 수 있습니다

.parent-container { 
    width: 100%; 
    position: relative; 
} 
.child-container { 
    width: 600px; 
    position: absolute; 
    left: 25px; 
    bottom: 100px; 
} 

그러나 .child-container도 position: relative이없는 .parent-container.child-container 인해 상대적 위치에있는 절대 위치 요소를 포함하고 있습니다. 그래서 내 질문은, .child-container의 아이들을 상대적으로 자신에게 상대적으로 위치시킬 수 있으며, 여전히 정확하게 위치를 유지하는 것입니다. .parent-container? P. S. 포장이 position: absolute에서 .child-container는 '

는 div 및 .child-containerposition: relative 트릭을해야하고 D,하지만 의미 뭔가 더 ... 기대했다.

Answer 1

절대적으로 위치한 요소는 이 이미이어야합니다. 여기서 절대 위치 내의 하위 항목을 표시하는 데모이다

.parent-container { 
    position: relative; 
    background: grey; 
} 
.child-container { 
    position: absolute; 
    background: red; 
    left: 20px; 
} 
.grandchild-container { 
    position: absolute; 
    background: yellow; 
    left: 20px; 
} 

jsFiddle

그것은 것이다 (색 차이점을 설명하기 위해 첨가) CSS HTML

<div class='parent-container'> 
    Parent 
    <div class='child-container'> 
     1st Child 
     <div class='grandchild-container'> 
      2nd Child 
     </div> 
    </div> 
</div> 

이 모양은 다음과 같습니다.

* 각 위치는 부모를 기준으로합니다.더 많은 정보를 들어

은 다음을 참조하십시오 .child-container``에 따라 .child-container` 위치가 아닌`.parent 컨테이너`의

• Positioning - w3schools
• Position - Mozilla Developer Network

Answer 2

"상대"부모를 설정하려면 .child- 컨테이너 위치를 상대 위치로 변경할 필요가 없습니다. 위치 절대 값에 대한 MDN에서이 링크를 검토하십시오.

"절대 위치 요소는 가장 가까운 위치의 조상에 상대적으로 배치되며, 위치가있는 조상이 존재하지 않으면 초기 컨테이너가 사용됩니다." 상대 고정 또는

Answer 3

하지만, .child 컨테이너는 때문에 상대적하기 .parent 컨테이너 위치에있는 절대 위치 요소를 포함 절대 총수 :

* 위치 조상은 하나와 원소이다. child-container는 position : relative를 가지고 있지 않습니다.

잘못된. 절대 위치는 가장 가까운 조상 인 이이며, position: relative이 아닙니다. position: static을 제외한 모든 요소는 요소를 배치합니다. (position: relative은 정상 흐름에서 컨테이너를 이동시키지 않으므로 부작용없이 위치 지정 컨텍스트를 설정할 때 사용됩니다).

부모가 position: absolute;이므로 이미 부모와 위치가 정해져 있습니다.