CSS position property 알아보기

position propery란?

element를 html document내 어떻게 배치하는지 설정하는 property

value : static(default) / absolute / relative / fixed / sticky

 

---

실습해보기

1. static

default 옵션, position과 함께 많이 쓰는 z-index의 경우 default는 0으로 지정되어 있음.

 

2. absolute

부모 중 position이 정의되어 있는 element를 기준으로 어디에 위치할지 지정할 수 있으며,

현재 document flow에서 벗어나게 됨.

아래 예제에서 만약 content class에 position relative가 없으면, position fixed로 정의되어 있는 navigation bar를 기준으로 위치가 지정.

 

3. relative

현재 위치해야할 곳을 기준으로 위치를 지정할 수 있음.

 

4. fixed

사용자가 보고 있는 화면 viewport를 기준으로 어디에 위치할지 지정할 수 있으며,

현재 document flow에서 벗어나게 됨.

주로 navigation bar와 같은 메뉴 구현 시 이용.

z-index를 이용하여 z축의 위치를 조정.

 

5. sticky

스크롤 시 사용자의 화면에 스티커가 붙여진 것 처럼 고정되게 됨.

 

자세한 실습 화면은 아래 Codepen을 참조!

See the Pen CSS position practice by woongwoongs (@woongwoongs) on CodePen.

 

---

Reference

position - CSS: Cascading Style Sheets | MDN