position: relative;
- '현재 있는 위치' 기준
| 초기 | .locate { position: relative; left: 30px; top: 30px; } |
.parent { margin-left: 100px; } |
 |
 |
 |
position: static;
- 웹사이트의 기본으로 돌아가겠다. left나 top 위치 속성 무시
| .locate { position: static; left: 30px; top: 30px; } |
.parent { margin-left: 100px; } |
.parent { position: static; margin-left: 100px; } |
 |
 |
 |
position: absolute;
- '부모 절대값' 기준
- 만약 부모 태그가 relative / absolute / fixed 중 하나가 아니라면 <body> 태그를 부모로 삼는다.
| .locate { position: absolute; left: 30px; top: 30px; } |
.parent { margin-left: 100px; } |
.parent { position: absolute; /* relative, absolute, fixed */ margin-left: 100px; } |
 |
 |
 |
position: fixed;
- absolute와 비슷하지만 스크롤을 내려도 그 위치! 화면에 고정
position: sticky;
- relative와 비슷하지만 스크롤을 내릴 때 fixed처럼 고정!
'프론트엔드 > HTML + CSS' 카테고리의 다른 글
| flexbox (0) | 2024.07.02 |
|---|