position: relative + position: absolute
"position: relative" 객체는 document의 정상적인 흐름을 따르지만, "position: absolute" 객체는 그 흐름에서 튀어나와 분리됩니다.
position 속성에 absolute 값을 지닌 child(자식) 객체에
top, bottom, left, right, height, width 값을 설정할 때
"position: relative" 값을 가진 가장 가까운 parent(상위, 부모) 객체를 기준으로 지정합니다.
바로 상위 객체에 position 속성으로 relative 값을 가진 객체가 없을 경우 찾을 때까지 더 상위 객체로 거슬러 올라갑니다.
만약에 없을 경우에는
- "document body"를 이용하거나,
- 웹 브라우저마다 다른 디폴트 값을 적용하거나,
- 오류가 발생하면서 화면의 구도가 깨질 수 있습니다.
If a positioned ancestor doesn't exist, it is positioned relative to the ICB(initial containing block), which is the containing block of the document's root element.
position relative 값을 지닌 상위 객체를 찾아서 설정하는 height 값은 그 상위 객체를 기준으로 한 수치입니다.
댓글