이전 게시글에서 display 속성에 대해 알아봤습니다.
display는 요소가 차지할 영역에 관한 정보들을 가집니다.
오늘 다룰 position은 요소가 배치될 위치에 관한 정보들을 가집니다.
즉, position이 요소의 위치를 결정하고, display가 그 요소가 차지할 영역을 결정하는 것입니다.
1. static (default)
position 속성을 별도로 지정하지 않는다면 기본값으로 static이 적용됩니다.
static일 때 요소들은 일반적인 문서 흐름에 따라 화면에 배치됩니다.
static에서는 좌표 값(top, bottom, left, right) 및 z-index 설정이 무시됩니다.
2. relative
relative는 요소의 원래 위치(static일 때 위치)를 기준으로 좌표 값만큼 이동합니다.
3. absolute
absolute는 상위 요소 중 static이 아닌 첫 번째 요소를 기준으로 좌표 값만큼 이동합니다.
(부모, 조상이 모두 static 프로퍼티인 경우 최상단의 <body>를 기준으로 위치하게 됩니다.
absolute일 때 block 요소의 width는 마치 inline 요소처럼 content의 크기에 맞춰 줄어듭니다.
주로 부모에 relative를 설정하고 자식에 absolute를 설정하는 방법을 사용합니다.
이러면 부모 요소를 기준으로 자식의 위치를 이동하기에 용이합니다.
4. fixed
fixed는 부모와 관계없이 브라우저의 viewport를 기준으로 좌표 값만큼 이동합니다.
fixed는 스크롤이 되더라도 요소가 항상 화면의 같은 곳에 고정됩니다.
fixed일 때도 block 요소의 width는 마치 inline 요소처럼 content의 크기에 맞춰 줄어듭니다.
5. sticky
sticky는 비교적 최근에 CSS에 추가된 속성입니다.
sticky는 평소에 static처럼 존재하다가 요소가 특정 스크롤 지점에 도달하면 fixed처럼 변합니다.
'프론트엔드 > CSS' 카테고리의 다른 글
| [SCSS] SCSS 문법 정리 (0) | 2022.04.27 |
|---|---|
| [CSS] display 속성 (block, inline, inline-block) (0) | 2022.04.19 |
| [CSS] Flex (Flexbox) (0) | 2021.04.16 |
| [CSS] 선택자 종류 (CSS selectors) (0) | 2021.04.12 |
| [CSS] 사용자 지정 CSS 속성 (custom properties) (0) | 2021.04.12 |