20. [CSS] z-index

이번 포스팅에서는 z-index 에 대해서 알아보도록 하겠습니다. 

https://developer.mozilla.org/ko/docs/Web/CSS/z-index

z-index - CSS: Cascading Style Sheets | MDN

MDN 사이트를 참고하여 작성하였습니다. 

 

z-index란?

: CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.

 

네, 하나만 기억합시다. 

z-index는 요소들이 겹칠 때 사용하는 속성입니다. 

 

position : absolute를 사용하면 요소가 붕 띄워져서 위치한 다는 것을 기억하시나요? 

z-index는 position 과 반드시 함께 사용됩니다. 

 

 

z-index가 클수록 위에 올라온다.

예제를 통해 알아봅시다. 

 

HTML

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

 

CSS

: dashbox위에 gold-box와 green-box가 겹쳐져 있는 형태입니다. 

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

[z-index 값]

dashbox - 1

greenbox - 2

goldbox - 3

 

goldbox가 가장 위에 있고 

greenbox 가 그 바로 아래에 있고

dashbox 가 가장 아래에 있겠네요!