[CSS] position 알아보기

position 공부할 때 생각할 점

1. 어떤 종류의 position type 인지

2. position type에 따라 무엇을 기준으로 요소를 위치시키는지

 

---

(1) static

-모든 요소의 기본 position(가장 일반적)

​

(2) relative

 

-기준점: 본인이 원래 있던 자리

-원래 있던 자리에서 조금씩 움직여야 할 때 사용

​

(3) absolute

 

-block으로 바뀜(길막 못하는 block)

-기준점: position이 static인 경우 제외하고 기준점을 선택할 수 있음(보통 relative로 지정)

-맥락에서 완전 떼어내서 옮겨야 할 때 사용

​

(4) fixed

 

-absolute 특징과 완전 비슷!

 but 기준점이 다른데 fixed의 기준점은 viewport

 (viewport는 브라우저 창의 전체 크기를 말함)

-viewport 기준으로 움직이는 것이 편해 보일 때 사용

​

(5) sticky

​-필수적으로 top, bottom, left, right들 중에 하나를 필수적으로 설정해주어야 함

-sitcky로 설정된 영역은 설정된 위치(예 top: 0px)에 도달하기 전까지는 static 속성처럼 행동하다가 설정된 위치에 다다르면 fixed 속성처럼 행동

 

 

 

 

※ z-index

:수직 방향으로의 위치 알려주는 기능