: 기본 값은 static이며 top, left, bottom, right 속성값은 무시됩니다.
1. absolute
- 가장 가까운 relative, absolute, fixed 부모 요소를 기준으로 위치함.
- 만약 그런 부모가 없으면 <body> 기준.
- 문서 흐름에서 제거됨 → 공간 차지 안 함
<div style="width:200px; height:200px; margin-top:100px; position: relative;">
<div style="width:100px; height:100px; position:absolute; top:200px;">
</div>
</div>
2. fixed
- 브라우저 창(Viewport) 을 기준으로 위치.
- 스크롤해도 항상 같은 위치에 고정됨.
- 문서 흐름에서 제거됨.
3. relative
- 자기 자신이 원래 있던 자리(문서 흐름) 를 기준으로 위치를 이동.
- 이동해도 자기 자리(공간) 는 그대로 유지됨.
- 주로 내부 absolute 요소의 기준점으로 사용됨.
<div style="width:200px; height:200px; margin-top:100px;">
<div style="width:100px; height:100px; position:relative; top:50; background-color: aqua; opacity: 0.5;">
position : relative
</div>
<div style="width:100px; height:100px; position:relative; top:0px; left:50px; background-color: blueviolet; opacity: 0.5;">
position : relative
</div>
<div style="width:100px; height:100px; position:absolute; top:150px; background-color: rgb(255, 0, 200); opacity: 0.5;">
position : absolute
</div>
</div>
✔ jQuery > .offset() : fixed 같은 효과. 선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정한다.
✔ jQuery > .position() : absolute 같은 효과. 선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환한다.
✔ z-index : relative, fixed, relative만 됨
https://www.daleseo.com/css-position-absolute/
'WEB개발 > PUBLISHING' 카테고리의 다른 글
| display flex, grid (0) | 2025.03.20 |
|---|---|
| Animation (transition, transform, keyframes) (0) | 2025.02.19 |
| font-face, line-height, letter-spacing (0) | 2022.12.07 |
| CSS, SCSS 선택자 (0) | 2022.08.02 |
