반응형

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
BOX2

분명 .box1 영역이 z-index:10 으로 설정해놓았기 때문에

더 위쪽에 위치해야할 것 같지만

실제로 출력되는 화면을 보면 .box2 영역이 .box1 영역을 덮고 있다.

 

그 이유가 바로 .box1에 position 값이 지정되어있지 않기 때문에

z-index 속성이 먹히지 않아서 이다.

 

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

BOX1
BOX2

그렇게되면 위의 모습과 같이 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>

위의 소스를 보면 .box2-1 클래스영역에 z-index 값이 999이기 때문이 그 어느것보다도 

앞에 위치할 것 같은데...

BOX1
BOX2
BOX2-1

 

 

 

 

막상 노출되는 화면을 보면 위와 같이 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
BOX2-1

 

 

 

그렇게되면 .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>

위와 같은 소스가 있다고 가정하여

출력을 한다면

BOX1
BOX2

 

 

 

위와 같이 .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>

 

BOX1
BOX

 

위의 소스를 출력하면 위와 같은 화면으로 출력이 된다.

 .box2는 어디에도 없다...

 

그 이유는 .wrap에 적용된 background:#fff 값 때문에 그렇다.

z-index 속성이 음수(-) 처리가 되면 기본적인 영역들의 바닥에 깔리게 되는데

 

부모 속성인 .wrap에 #fff 색상의 장판을 깔아서

그 아래에 들어간 .box2가 보이지 않게 된 것이다.

 

그래서 z-index 값을 음수(-)로 사용할 때는

부모 요소에 background가 없는지 확인하고

 

가능하면 이런 문제를 피하기 위해 음수가 아닌 양수의 값을

사용하도록 하는 것이 좋다.

 

 

반응형
저작자표시 비영리

'Frontend > CSS' 카테고리의 다른 글

[css 단위] vw, vh, vmin, vmax (Viewport 단위)  (0) 2020.04.22
[css 속성] transition  (0) 2020.04.21
[css 속성] float (float 해제, clear)  (0) 2020.03.24
[css 속성] position (static, relative, absolue, fixed)  (0) 2020.03.23
[css 속성] display (block, inline, inline-block, table)  (0) 2020.03.06

+ Recent posts

티스토리툴바