CSS - [ 속성(position / 요소 쌓임 순서) ]

이번에는 요소를 원하는 위치에 배치할 수 있는 position 속성을 포함해서 여러 가지 속성들을 살펴보자.

 

• position : 요소의 위치 지정 기준. relative는 요소 자신을 기준으로, absolute는 위치상 부모 요소를 기준으로, fixed는 뷰포트를 기준으로 한다. 요소를 배치할때는 기준을 잡고 나서 위치 값을 설정해야 한다는 사실을 기억하자! position을 이용해 기준을 잡고 나면, top bottom left right 등 의 속성(값이 아니고 속성!!)을 이용해 위치 값을 설정할 수 있다. absolute, fixed가 지정된 요소는 display 속성이 block으로 변경되고, 가로 너비가 최소한으로 줄어들게 된다.

 

 

2번 요소에 자신을 기준으로하는 relative 값을 주고, top과 left에 위치 값을 주면 사진과 같이 자신의 위치를 기준으로 요소가 새롭게 배치된다. 배치 전 자리는 비어있게 된다!

원래 위치를 기준으로 움직임

 

위치를 absolute로 설정하면 배치될 기준이 부모요소가 되므로, 1번과 3번 요소와는 상호작용 할 필요가 없다. 따라서 2번 요소에 absolute 값을 주면 공중에 뜨게 되고, 3번 요소가 1번 요소 다음에 오게 된다. 참고로 구조상 부모 요소에 특정한 position 값이 들어있어야한다(static 값 제외). 부모 요소를 거슬러 올라가도 조건을 만족하는게 없으면 뷰포트가 기준이 된다.

부모 요소를 기준으로 움직임

 

fixed는 뷰포트가 기준이 된다. 마찬가지로 1번과 3번 요소와는 상호작용 하지 않고  2번 요소가 공중에 뜨고, 1번 요소 다음에 3번 요소가 온다.

뷰포트를 기준으로 움직임

 

 

---

요소 쌓임 순서(Stack order)는 어떤 요소가 사용자와 더 가깝게 있는지를(위에 쌓이는지) 결정한다.

먼저 요소에 position 속성의 값이 있는 경우 위에 쌓이고(static 제외)  >  z-index 속성의 숫자 값이 높을 수록 위에 쌓이고  >  HTML의 다음 구조일수록 위에 쌓인다.

 

z-index는 2번째로 요소의 쌓임 정도를 지정한다. 기본값은 부모 요소와 동일한 쌓임 정도인 auto(=0)이고 숫자가 높을수록 위에 쌓인다. 일반적인 요소보다 더 뒤에 두고 싶을 때 -1 값을 주기도 한다. 참고로 z-index 값에는 999 등 큰 숫자를 넣지 않는 게 좋다. 나중에 더 위에 쌓이는 요소를 만들어야 할 때 코드가 복잡해지고 관리가 어려워질 수 있다. 되도록 숫자 1부터 하나씩 증가하도록 값을 주는게 좋다.

 

---