[CSS] z-index

z-index

 

 

예제

<div class="div1">Lorem ipsum, dolor sit</div>
<div class="div2">Lorem ipsum, dolor sit</div>
<div class="div3">Lorem ipsum, dolor sit</div>

 

div {
  box-sizing: border-box;
  margin: 10px;
  padding: 10px;
  width: 100px;
  height: 100px;
  border: 10px solid #000;
  background: red;
  font-size: 16px;
  font-weight: 700;
/*font-weight : 300(thin) | 400(normal) | 500(medium) | 700(bold) | 900 (extra bold)*/
  color: #000;
/*text-align : center | left(default) | right */
/*overflow : auto(영역이 넘어가야 스크롤바 노출. 주로 씀) | scroll(항상 스크롤바 노출) | hidden */
}

.div1 {

}

.div2 {
  position: relative;
  top: -50px;
  left: 50px;
  background: blue;
}

 

 

z-index

z-index를 설정해주지 않으면, 아래에 적힌 게 더 우선순위

div {
  box-sizing: border-box;
  margin: 10px;
  padding: 10px;
  width: 100px;
  height: 100px;
  border: 10px solid #000;
  background: red;
  font-size: 16px;
  font-weight: 700;
/*font-weight : 300(thin) | 400(normal) | 500(medium) | 700(bold) | 900 (extra bold)*/
  color: #000;
/*text-align : center | left(default) | right */
/*overflow : auto(영역이 넘어가야 스크롤바 노출. 주로 씀) | scroll(항상 스크롤바 노출) | hidden */

}

.div1 {
  position: relative;
  z-index: 3;
}

.div2 {
  position: relative;
  top: -50px;
  left: 50px;
  background: blue;
  z-index: 2;
}