티스토리 뷰

CSS

CSS - z-index

오이연우오 2022. 4. 15. 18:45

css를 작성하면서 내가 원하는 컨텐츠가 다른 컨텐츠 뒤에 가려져서 난감한 경우가 종종 있다. 그런 경우를 해결하기 위해 사용하는 속성이 바로 z-index라는 속성이다.
z-index의 기본값은 auto 이고 보통 1, 9, 100, -1, -100등의 숫자로 그 속성의 값을 지정한다.

1. z-index 특징 (position값과의 연관성)

z-index의 가장 중요한 특징 중 하나는 아무 요소나 다 z-index를 넣는다고 해서 우선순위를 넣을 수 는 없다는 점이다. z-index 속성이 적용되기 위해서는 z-index를 적용한 영역이 position:static 값이 아니어야 한다.

<style>
   .wrap{position:relative;}
   .box1{background:skyblue; width:100px; height:100px; z-index:10;}
   .box2{position:absolute; top:0; left:0; background:pink; width:50px; height:50px; z-index:1;}
</style>
<body>
   <div class="wrap">
      <div class="box1">BOX1</div>
      <div class="box2">BOX2</div>
   </div>
</body>

분명 .box1 영역이 z-index:10 으로 설정해놓았기 때문에 더 위쪽에 위치해야할 것 같지만 실제로 출력되는 화면을 보면 .box2 영역이 .box1 영역을 덮고 있다.

그 이유가 바로 .box1에 position 값이 지정되어있지 않기 때문에 z-index 속성이 먹히지 않아서 이다.

.box1에 position:relative를 주게되면 어떻게 될까?

그러면 위의 모습과 같이 z-index:10을 준 .box1 영역이 더 위쪽으로 오는 것을 확인할 수 있다.

2. z-index 특징 (같은 형제 요소와의 비교)

z-index의 가장 중요하면서 헷갈리기 쉬운 특징 중에 하나는 z-index의 비교 대상을 확인하는 것이다.
z-index는 같은 형제 요소에 선언된 z-index끼리 비교를 한다. 만약 같은 형제 요소끼리에서 z-index가 선언된 내용이 없으면 자식 요소의 z-index값을 가지고 확인한다.

<style>
 .wrap{position:relative;}
 .box1{position:absolute; top:0; left:0; background:skyblue; width:40px; height:40px; z-index:10;}
 .box2{position:absolute; top:0; left:0; background:pink; width:80px; height:80px; z-index:1;}
 .box2-1{position:absolute; top:0; left:0; background:red; width:60px; height:60px; z-index:999;}
</style>
<body>
   <div class="wrap">
      <div class="box1">
         BOX1
      </div>
      <div class="box2">
         BOX2
         <div class="box2-1">BOX2-1</div>
      </div>
   </div>
</body>

노출되는 화면을 보면 위와 같이 box1 영역이 가장 위쪽으로 위치하게된다. 이는 .box1과 .box2 두 형제 요소끼리의

z-index 비교에서 이미 .box2영역이 z-index:1로 .box1의 z-index:10에서 밀리기 때문에 .box2 자식 요소로 있는 영역에 아무리 z-index를 많이 줘봤자 밀리게 된다.

원래 원하던대로 .box2-1를 가장 위쪽으로 위치하게 하기 위해선 .box2에 설정된 z-index:1; 을 제거하면 된다.

<style>
 .wrap{position:relative;}
 .box1{position:absolute; top:0; left:0; background:skyblue; width:40px; height:40px; z-index:10;}
 .box2{position:absolute; top:0; left:0; background:pink; width:80px; height:80px;}
 .box2-1{position:absolute; top:0; left:0; background:red; width:60px; height:60px; z-index:999;}
</style>
<body>
   <div class="wrap">
      <div class="box1">
         BOX1
      </div>
      <div class="box2">
         BOX2
         <div class="box2-1">BOX2-1</div>
      </div>
   </div>
</body>

그렇게되면 .box1과 .box2-1의 z-index값을 비교하게 되어 원하는 값을 출력받을 수 있다.

3. z-index의 음수(-) 값

z-index로 우선순위를 지정하다보면 필요에 따라서 음수(-) 값을 주게되는 경우가 있다. 그런 경우 어떤 경우에는 내가 원하는대로 기존 값들의 뒤쪽에 잘 배치가 되는가하면 어떠한 경우에는 아예 내가 조정하려는 영역이 화면에서 사라지게 된다.

<style>
 .wrap{position:relative; height:100px; background:#fff;}
 .box1{position:absolute; top:0; left:0; background:skyblue; width:40px; height:40px;}
 .box2{position:absolute; top:0; left:0; background:pink; width:80px; height:80px;}
</style>
<body>
   <div class="wrap">
      <div class="box1">BOX1</div>
      <div class="box2">BOX2</div>
   </div>
</body>

위와 같은 소스가 있다고 가정하여 출력을 한다면

.box2 영역이 .box1을 덮는 형태로 출력이 될 것이다.
이 경우 .box1의 z-index를 조정하지 않고 .box2에 z-index를 음수(-) 로 줘서 조정할 수 있다고 생각할 수 있다. 실제로도 z-index를 음수 값을 줘서 조정하는 경우도 있다. 하지만 위의 소스같은 경우 .box2에 z-index 값을 음수로 주게되면 .box2 영역이 사라지는 것을 볼 수 있다.

<style>
 .wrap{position:relative; height:100px; background:#fff;}
 .box1{position:absolute; top:0; left:0; background:skyblue; width:40px; height:40px;}
 .box2{position:absolute; top:0; left:0; background:pink; width:80px; height:80px; z-index:-1;}
</style>
<body>
   <div class="wrap">
      <div class="box1">BOX1</div>
      <div class="box2">BOX2</div>
   </div>
</body>

위의 소스를 출력하면 위와 같은 화면으로 출력이 된다. .box2는 어디에도 없다.
그 이유는 .wrap에 적용된 background:#fff 값 때문이다. z-index 속성이 음수(-) 처리가 되면 기본적인 영역들의 바닥에 깔리게 되는데 부모 속성인 .wrap에 #fff 색상의 장판을 깔아서 그 아래에 들어간 .box2가 보이지 않게 된 것이다.

 

그래서 z-index 값을 음수(-)로 사용할 때는 부모 요소에 background가 없는지 확인하고 가능하면 이런 문제를 피하기 위해 음수가 아닌 양수의 값을 사용하도록 하는 것이 좋다.

 

'CSS' 카테고리의 다른 글

CSS - 애니메이션  (0) 2022.04.16
CSS - IR 효과  (0) 2022.04.16
CSS 몇가지 팁  (0) 2022.04.15
CSS - 이미지 중앙 정렬  (0) 2022.04.15
CSS - 가상요소  (0) 2022.04.15

UP NEXT : CSS

댓글
© 2018 webstoryboy