position
static
기본값,
일반적인 순서(왼쪽에서 오른쪽, 위에서 아래)로 요소를 배치한다.
top, bottom, right, left, z-index의 영향을 받지 않는다.
relative
static과 마찬가지로 일반적인 순서에 따라 요소를 배치하지만,
top, bottom, left, right, z-index 속성으로 요소의 위치를 조정할 수 있다.
top, bottom, left, right 속성은 각각의 방향을 기준으로 태그 안쪽 방향으로 이동하게 된다.
예) top: 5px은 화면의 위(top)에서 안쪽으로(화면 가운데쪽으로) 5px만큼 이동한다.
요소를 더 위쪽으로(바깥쪽으로) 이동시키고 싶다면 -5px을 주면 된다.
left: 10px은 화면 왼쪽에서 안쪽으로(가운데쪽으로) 10px 이동하며,
-10px을 주면 화면 왼쪽 방향으로 이동한다.
absolute
static이나 relative처럼 일반적인 순서를 따르지 않는다.
position: static 속성을 가지고 있지 않은 부모를 기준으로 이동한다.
만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그인 body가 기준이 된다.
absolute 속성을 가지면 div의 width: 100%가 아니게 된다.
fixed
static이나 relative처럼 일반적인 순서를 따르지 않으며,
화면의 viewport(보여지는 부분)의 body를 기준으로 한 위치에 놓여진다.
즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 된다.(모든 페이지에서 같은 위치에 놓임)
단, 조상 중 하나라도 transform, perspective, filter 속성을 가지고 있다면
뷰포트 대신 그 조상 요소를 기준으로 삼는다.
fixed 속성을 가지면 div의 width: 100%가 아니게 된다.
sticky
static, relative와 같이 일반적인 순서에 따라 요소가 배치된다.
top, right, bottom, left 속성값이 적용되며,
가장 가까운 스크롤되는 조상 요소와 테이블 관련 요소를 포함한 블록 레벨 조상 요소를 기준으로 놓여진다.
sticky 속성을 준 요소는 static처럼 일반적인 순서에 따르지만,
스크롤 위치가 임계점에 이르면 position: fixed와 같이 박스를 화면에 고정할 수 있다.
(화면을 스크롤할 때 상단의 메뉴가 고정, 엑셀에서의 틀 고정을 생각하면 이해하기 쉽다.)
position을 sticky로 지정하고 top, right, bottom, left 속성이 없으면, static과 같은 위치에 놓이게 된다.
sticky는 relative와 마찬가지로 다른 요소들에 영향을 주지 않는다.
참고한 글
'프로그래밍 > HTML & CSS' 카테고리의 다른 글
| [CSS] z-index (0) | 2021.04.09 |
|---|---|
| [CSS] background-repeat (0) | 2021.04.09 |
| [CSS] hover 시 이미지 커지게 하기 (0) | 2021.04.09 |
댓글