[css]_8(position2)

CSS 위치에 대한 정의

목차

요소 쌓임 순서

요소가 쌓여있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지를 결정한다.
position의 속성값이 작성되어 있지 않으면 HTML에서 마지막 코드일 수록 위에 쌓인다.

1. static을 제외한 position속성의 값이 있을 경우 가장 위에 쌓임
2. position이 모두 존재한다면 z-index 속성의 숫자의 값이 높을 수록 위에 쌓인다.
3. position이 모두 존재하고 ```z-index``속성 값 또한 같다면 HTML의 마지막 코드일 수록 위에 쌓인다.

예제) 5개의 박스를 만들어서 어떻게 쌓이는지 보자(box1~5까지 position 입력 X)

See the Pen position difference by duckey-kim (@duckey-kim) on CodePen.

예제 5개의 박스를 만들고 box4,5에 position의 속성값을 넣고, z-index의 값을 부여한다.

See the Pen duckey by duckey-kim (@duckey-kim) on CodePen.

box4에는 z-index:3;을 주었고 box5에는 z-index:2;을 주었다.
z-index값이 큰 box4가 제일 위에 있고 그다음 box5가 위에 있다. box3,5는 멀리 떨어져있지만 box5는 position값이 입력되어 있기때문에 3보다는 5가 더 위에 있다.