-
[CSS 기초]position, z-index(+stacking context)CSS 2023. 5. 22. 18:42
position속성
CSS에서 요소들은 문서의 흐름에 따라 배치된다.
<html> <body> <div>item1</div> <div>item2</div> <div>item3</div> </body> </html>
기본 상태 이러한 흐름에서 벗어나 배치를 하기 위한 속성이 존재한다. 바로 position속성이다.
position속성은 요소가 어떤 위치 기준으로 배치되는지를 결정하는 위치지정 컨텍스트(positioning context)를 설정하는 옵션이다.
position사용 이 position속성의 값은 크게 5가지가 존재한다.
1.static(기본값)
기본 값으로 문서의 흐름에 따라 요소를 배치한다. top,right,bottom,left,z-index 속성을 적용할 수 없다.
2.absolute
요소를 문서 흐름에서 벗어나 가장 가까운 상위 요소 중 position값이 static이 아닌 첫 번째 요소를 기준으로
위치를 결정한다. 상위에 position:relative 라면 그 요소를 기준으로 위치를 결정한다.
3.relative
요소는 문서 흐름에서 벗어나지 않고 원래 위치에서 상대적으로 이동시킨다.
4.fixed
요소를 뷰 포트(브라우저 창)를 기준으로 위치를 고정한다. 스크롤 되어도 요소는 고정된다.
5.sticky
상위 요소 중 position:relative 또는 position:sticky가 지정된 요소를 기준으로 상대적인 위치를 가진다.
relative 배치와 fixed 배치의 조합이라고 할 수 있다. 지정된 값을 넘어서면 고정되도록 한다.
z-index 속성
✨z-index는 요소가 쌓이는 순서를 지정하는데 사용한다. 속성의 값은 정수로 표시하며, 높은값일 수록 가장 위에 쌓이게 된다.
✨z-index 속성을 사용하려면 position속성을 통해서 static이외의 값을 사용해야 한다.
✨z-index는 기본적으로 0을 갖는다.
<body> <div class="box one">box1</div> <div class="box two">box2</div> <div class="box three">box3</div> </body>
이런 박스가 있다. 이것을 position : fixed로 겹쳐보자.
가장 위에 box3이 올라온 것을 확인 할 수 있다.
z-index가 모두 동일하게 0일 경우 HTML순서에 따라 겹치는 순서가 결정된다.
그래서 box3이 가장 마지막이기 때문에 위와같이 나온다.
여기서 box1에 z-index:1을 주면 가장 위로 올라오는것을 확인 할 수 있다.
stacking-context
z-index 속성에서는 주의해야할 점이 있다. 바로 stacking-context에 주의해야한다는 점이다.
stacking-context를 직역하면 쌓임 맥락이다. 맥락을 주의하지 않으면 z-index가 높아도 쌓이는 순서가 더 낮게 되는 경우가 생긴다.
<style> header{ position:relative; z-index:2; } main{ position:relative; z-index:1 } .btn{ position:absolute; z-index:999; } </style> <header>stacking context</header> <main> <div class="btn">Click</div> <span>main content</span> </main>
.btn이 header보다 z-index가 훨씬 크지만 아래에 배치된것을 확인 할 수 있다.
이렇게 배치되는 이유는 .btn클래스의 상위 요소인main의 z-index가 header보다 작기 때문이다.
이를 해결하기 위해서 main의 z-index를 지워주면 된다. z-index를 지워주면 context(맥락)을 생성하지 않기 때문이다.
이렇게 stacking-context를 주의하지 않으면 z-index가 적용되지 않는 경우가 생긴다.
'CSS' 카테고리의 다른 글
[CSS기초]background속성 (0) 2023.05.26 [css기초]flex의 아이템 속성 (0) 2023.05.24 [CSS기초] flex의 컨테이너 속성 (0) 2023.05.23 [CSS기초]box-sizing과 display (0) 2023.05.22 [CSS기초]선택자와 결합자,속성값 (0) 2023.05.21