static
기본값. 요소를 일반적인 문서 흐름에 따라 배치한다.
relative
요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. = 일단 흐름에 따라 자기 자리를 잡은 뒤 값에 따라 이동한다.
❗️top값과 bottom값이 겹칠 경우 bottom값은 생략된다.
absolute
요소를 일반적인 문서 흐름에서 제거하고, 그 요소만 붕 뜨게돼서 나머지 요소들만 원래 문서 흐름에 따라 배치된다.
Position: absolute; top: 100px;=> absolute 상태에 추가로 값을 넣게되면 자기 자신이 아닌 부모(position이 static이 아닌 요소)를 기준으로 값을 적용하게 된다. 적합한 부모가 없다면 초기 컨테이닝 블록 (ex)
body)을 기준으로 삼는다.
fixed
absolute와 같이 요소를 일반적인 문서 흐름에서 제거하지만 뷰포트를 기준점으로 삼는다.
😮 스크롤을 해도 fixed된 요소는 그대로 그 자리에 있는다.
fixed는 언제 활용할 수 있을까?
position: fixed; bottom: 40px; right: 40px;이렇게 설정 하면 요소가 오른쪽 아래부분에 위치하게 되는데, 보통 이런 요소는 "맨 위로 가기" 버튼을 만들 때 많이 쓰인다.
sticky
요소가 스크롤 할 때 따라 오다가 어느 특정 지점에서 멈춰서 그 위치에 머무르게 된다.
#box { position: sticky; top: 100px; left: 100px; }=> top에서부터 100px 아래, 왼쪽에서부터 100px 나온 위치에 요소가 위치하게 되면 스크롤을 해도 그 위치에 멈춰있는다.
❗️ 스크롤 되는 조상의 바로 아래 자식에 sticky을 적용해야한다. 예를 들어, 스크롤 되는 조상이 <body>라면 그 바로 아래의 태그 안에 sticky를 적용해야 작동이 된다.
overflow
요소의 컨텐츠가 너무 커서 요소의 block 서식 맥락에 맞출 수 없을 때의 처리법을 지정한다.
그대로 보여주기 (기본값):
overflow: visible;
가려주기:overflow: hidden;
스크롤 바 생성하기:overflow: scroll;
스크롤 바 생성 OR 내용이 넘치지 않으면 생성 X:overflow: auto;
z-index
z축 순서를 지정한다.
기본값:
z-index:0;=z-index:auto;
위로 올리려면 +, 밑으로 내리려면 -값을 주면 된다.
이런 좋은 글을 작성해주셔서 감사합니다.