[HTML/CSS] position - static/relative/absolute/fixed/z-index

position 속성은 말 그대로 좌표를 통하여 위치를 선정하는 속성이다.

 

아래 사진과 같이 개체들을 겹치고 싶거나, 위치를 고정하고 싶을 때 사용하는 방법이다.

 

 

---

*position 속성을 통해 위치를 이동한 개체는 모두 float 상태이다.

 

Static

모든 태그들은 기본적으로 static 상태이다.

static 상태에서는 position을 이용한 위치변경이 불가능하다.

 

Relative

position: relative; 를 통해 기준점을 잡을 수 있다.

기준점이 생기고 난 뒤에는 top, bottom, left, right를 통하여 개체의 위치를 조절할 수 있다.

 

Absolute

position: absolute; 를 통해 개체를 옮길 수 있다.

이때 기준점은 static이 없는 태그이다.

만약 전부 static 상태라면 body태그를 기준점으로 삼는다.

 

 

Fixed

상단 nav바, top 버튼, 좌측 메뉴바 등 스크롤을 내려도 그 자리에 고정되어있는 태그를 만들고자 할 때 사용한다.

 

z-index

position으로 이동한 개체들은 모두 float 상태이다.

많은 개체들이 float 상태라면 어떤 개체들이 가장 앞으로 나와야할지 우선순위가 명확하지 않을 것이다.

이때 사용하는게 z-index이다.

z-index가 클수록 화면 가장 앞에 위치한다.