절대 위치 지정 및 문서 플로우 유지

Question

CSS에서 절대 위치 (부모 요소와 관련하여)와 같은 요소를 배치 할 수있는 방법이 있습니까? 지. 부모 요소의 맨 아래에 있지만 문서 플로우에 계속 머물러 있어야합니까?

E. g. 상대적 요소가 절대 값을 "터치"할 때 컨테이너 요소의 높이가 증가하는 동안 "절대"요소를 아래쪽으로 밀면서 더 높이를 가짐으로써 요소 위에 상대적으로 배치 된 요소가 " 절대 "- 요소 위치 및 컨테이너 요소의 높이가 변경되지 않습니다"터치 "?

아니면 이것은 불가능한 작업이며 자바 스크립트에서만 수행 할 수 있습니까? 상위 DIV에

position: relative; 

을 강제하는 경우

Answer 1

당신은 부모에 대한 절대 사업부의 상대 위치를 지정할 수 있습니다. 그렇지 않으면 문서에 상대적으로 절대 위치가 지정됩니다.

<div style="position:relative;"> 
    <div style="position:absolute; top:10px; right:10px;"> 
     ................ 
    </div> 
</div> 

이

원하는 스트레칭 효과를 가지고 있지만하지 않습니다 부동 마진을 적용하는 잘못 당신이 설명하는 블록 행동의 종류를 원한다면?

<div style="position:relative;"> 
    <div style="float: right; margin-top:10px; margin-right:10px;"> 
     ................ 
    </div> 
    <div>text</div> 
</div> 

는만큼 당신이 제대로 부모 DIV를 지우로, 다음 떴다 내용이나 위의 DIV의 정상적인 내용 중 하나는 부모 요소의 높이를 확인할 수 있습니다.

또한 아래쪽으로 정렬해야하는 경우 디스플레이를 살펴볼 수 있습니다 (테이블 7-1에서 작동하지 않음)