position : HTML 태그와 요소의 위치를 지정
position: static
속성을 별도 지정하지 않으면 기본값인 static 적용
HTML에 작성된 순서 그대로 화면에 표시
top, left, bottom, right, width, height 속성값➡️ position: static 일 땐 무시, 원래 위치의 상하좌우로 안움직인다.
position: relative
요소를 원래 위치를 기준으로 상대적(relative)으로 배치
top, left, bottom, right, width, height 속성값 ➡️ 원래 위치의 상하좌우로 부터 얼마나 떨어지게 할지 지정
position: absolute
배치 기준을 자신이 아닌 상위 요소에서 발견
➡️ 상위 요소중 position: static이 아닌 첫 번째 상위 요소를 배치 기준으로 설정
만약, 상위 요소에 static이 아닌 요소가 없다면 <body>가 기준
position: fixed
스크롤하더라도 특정 부분에 고정되어 움직이지 않는 박스 (ex: 네이버나 다음을 스크롤해도 검색 박스가 상단 고정)
position: sticky
스크롤하다가 특정 박스가 특정 부분에 붙어 고정되어 움직이지 않는 것
'[ CSS ]' 카테고리의 다른 글
| Transform (0) | 2024.07.04 |
|---|---|
| Transition (0) | 2024.07.04 |
| Animation (0) | 2024.07.04 |
| [10] FLEX (0) | 2024.06.28 |
| [3] CSS 선택자 (0) | 2024.06.27 |