CSS의 absolute position 작동 메커니즘 이해

CSS의 `position` 속성은 요소가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 기본값은 `static`이며 `relative`나 `absolute`, `fixed` 등으로 변경이 가능하죠. 이번 시간에는 그 중에서도 가장 다루기 까다로운 `absolute`에 대해서 알아보려고 하는데요. `position` 속성이 `absolute`로 설정되어 있는 엘리먼트는 웹페이지 상에 배치될 때 다음과 같은 특징을 갖습니다. * 부모 요소 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 됩니다. 마치 포토샵 같은 그래픽 툴에서 새로운 레이어를 추가하는 효과에 비슷하다고 생각하시면 됩니다. * 따라서, 요소를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있으며, 심지어 부모 요소 위에 겹쳐서 배치할 수도 있습니다. * 단, 상위 요소 중에 `position` 속성이 `relative`인 요소가 있다면, 그 중 가장 가까운 요소의 내부에서만 요소를 자유롭게 배치할 수 있습니다. 즉, 전체 화면이 아닌 해당 상위 요소를 기준으로 offset 속성(`top`, `left`, `bottom`, `right`)이 적용됩니다. CSS를 공부하시는 분들이 특히 마지막 특징을 많이 헷갈려하시는데요. 간단한 예제를 통해 absolute position의 작동 메커니즘을 차근차근 설명드리겠습니다. 📺 동영상: https://youtu.be/F2nQDalqOzM [https://youtu.be/F2nQDalqOzM?si=XSFFNIrlHqHjRrL2] 📝 포스팅: https://www.daleseo.com/css-position-absolute/ [https://www.daleseo.com/css-position-absolute/] 🧑‍💻 실습 코드: https://codepen.io/daleseo/pen/NWKwojR [https://codepen.io/daleseo/pen/NWKwojR]