1. 정적 위치(static position) 지정 방식
2. 상대 위치(relative position) 지정 방식
3. 고정 위치(fixed position) 지정 방식
4. 절대 위치(absolute position) 지정 방식
absolute
요소를 일반적인 문서 흐름에 제거하고 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 부모 요소 혹은 조상 요소 중 position속성이 relative인 요소에 대해 상대적으로 배치합니다. 위치는 top, right, left, bottom 이 있습니다.
relative
요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right,bottom, left의 값에 따라 오프셋을 적용합니다.오프셋은 다른 요소에는 영향을 주지 않습니다.
fixed
요소를 일반적인 문서 흐름에서 제거하고 페이지 레이아웃에 공간도 배정하지 않습니다.대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다.
'JS와 친구들' 카테고리의 다른 글
| [css] 버튼 나란히 두기 (0) | 2022.12.21 |
|---|---|
| [css] inline, inline-block, block (0) | 2022.12.21 |
| [개발자도구] 개발자도구와 친해지자 (0) | 2022.12.13 |
| [css] image Sprites 기법 (0) | 2022.11.22 |
| dirname + /public했는데 css가 적용이 안될 때 (0) | 2022.10.19 |