[css 응용] z-index 버그 (opacity, transform과 함께 사용시)

2020.03.31 - [Frontend/CSS] - [css 속성] z-index 우선순위 주기, z-index -(음수) 처리

 

이전에 z-index의 특징과 함께 각 영역별 우선순위를 주는 방법에 대해 포스팅 한 적이 있다.

그와 더불어 z-index 값을 음수로 처리하게 되면 어떤 문제가 생기고 어떻게 해결해야할지에 대해서도 포스팅을 했다.

 

실무를 하면서 z-index를 사용하게 될 일이 많은데 

z-index가 생각보다 다루기 어렵고 여러가지 상황을 고려해야하는 속성이라는걸 사용할 때마다 느낀다.

 

z-index 버그 중 최근에 알게된 버그가 있어서 포스팅을 하게 되었다.

 

관련 내용은 '쌓임 순서 (Stacking Order)' 라는 내용으로 많은 포스팅이 있지만

우선 순전히 실무 작업용으로 간단하게 버그 내용과 해결방법을 소개해보려한다.

 

1. opacity와 함께 사용시

<style>
  .wrap{position:relative; width:130px; height:130px; background:#ccc; color:#fff; font-size:13px;}
  .wrap .inner_box{position:absolute; width:40px; height:40px;}
  .box1{opacity:0.9;}
  .box1 .inner_box{top:10px; left:18px; background:purple; z-index:10;}
  .box2 .inner_box{top:18px; left:10px; background:red; z-index:1;}
</style>
  
<div class="wrap">
  <div class="box1">
    <div class="inner_box">BOX1</div>
  </div>

  <div class="box2">
    <div class="inner_box">BOX2</div>
  </div>
</div>

위와 같은 css와 html을 적용했을 때

원하는 출력 화면은 box1이 box2보다 위에 있는 모습일 것이다.

 

우선 .box1, .box2 요소가 z-index를 따로 선언해주지 않았기 때문에 큰 영향이 없는 상황에서

.box1 .inner_box가 z-index:10

.box2 .inner_box가 z-index:1 을 주었기 때문에

생각하고있는 이론상엔 box1 영역이 제일 위로 와야하지만

box2 영역이 오히려 위쪽으로 위치하게된다.

 

그 이유는 바로 .box1에 적용한 opacity 값 때문이다.

.box1의 .inner_box에 아무리 높은 z-index를 주게되어도

.box1에 opacity값을 주게되면 .box1영역은 z-index:0으로 임의 지정이 되기 때문이다.

 

<style>
  .wrap{position:relative; width:130px; height:130px; background:#ccc; color:#fff; font-size:13px;}
  .wrap .inner_box{position:absolute; width:40px; height:40px;}
  .box1{opacity:0.9;}  /* .box1{opacity:0.9; --> z-index:0} */
  .box1 .inner_box{top:10px; left:18px; background:purple; z-index:10;}
  .box2 .inner_box{top:18px; left:10px; background:red; z-index:1;}
</style>

<div class="wrap">
  <!-- box1 = z-index:0 -->
  <div class="box1">
    <div class="inner_box">BOX1</div>
  </div>

  <!-- box2 = z-index:auto -->
  <div class="box2">
    <div class="inner_box">BOX2</div>
  </div>
</div>

위 css 내용처럼 가

 

.box1 (z-index:0)

.box2 (z-index:auto) 로 적용이 되기 때문에 .box2에 있는 영역들이 위쪽으로 위치하게 된다.

 

2. transform과 함께 사용시

opacity 사용 때와 마찬가지로 특정 영역에 transform을 사용하게 되면

해당 영역은 z-index:0으로 적용이 된다.

<style>
  .wrap{position:relative; width:130px; height:130px; background:#ccc; color:#fff; font-size:13px;}
  .wrap .inner_box{position:absolute; width:40px; height:40px;}
  .box1{transform:translateX(-1px);}
  .box1 .inner_box{top:10px; left:18px; background:purple; z-index:10;}
  .box2 .inner_box{top:18px; left:10px; background:red; z-index:100;}
</style>
  
<div class="wrap">
  <div class="box1">
    <div class="inner_box">BOX1</div>
  </div>

  <div class="box2">
    <div class="inner_box">BOX2</div>
  </div>
</div>

위의 소스도 달라진 내용은 opacity대신 transform을 사용한 것 뿐인데

역시나 box2 영역이 위쪽으로 위치하게 된다.

 

3. 해결방법

위와 같이 opacity, transform 을 사용하게 되면

자식요소에 아무리 z-index 값을 높게 줘도 부모요소에서 이미 z-index:0 이 적용되기 때문에

원하는 화면을 출력하는데에 어려움이 있다.

 

그렇기 때문에 이 문제를 해결하기 위해서는 내가 앞쪽에 위치시킬 영역의 부모요소와

그것과 겹치는 영역의 부모요소와의 z-index 값을 조정하는 것이 중요하다.

<style>
  .wrap{position:relative; width:130px; height:130px; background:#ccc; color:#fff; font-size:13px;}
  .wrap .inner_box{position:absolute; width:40px; height:40px;}
  
  .box1{position:relatvie; z-index:10; transform:translateX(-1px);}
  .box1 .inner_box{top:10px; left:18px; background:purple; z-index:10;}
  
  .box2{position:relative; z-index:1}
  .box2 .inner_box{top:18px; left:10px; background:red; z-index:100;}
</style>
  
<div class="wrap">
  <!-- box1 = z-index:10 -->
  <div class="box1">
    <div class="inner_box">BOX1</div>
  </div>

  <!-- box1 = z-index:1 -->
  <div class="box2">
    <div class="inner_box">BOX2</div>
  </div>
</div>

위의 소스와 같이 box1에 opacity를 줬지만 관련해서 생기는 문제를 해결하기위해

.box1에 z-index값을 새로 정의해주고

더불어 형제 요소인 .box2에 z-index값을 그보다 낮게 주는 방법으로

.box1 .inner_box 영역을 내가 원하는대로 더 위쪽으로 위치시킬 수 있게 되었다.