z-index

z-index가 없을 때 

-> z- index가 적용되지 않은 요소 간에는 html 문서 상에서 나중에 나오는 요소가 먼저 나오는 요소 위에 올라오도록 설정.

-> position과 static 속성에 의해서 변동

 

• position 속성이 static이 아닌 요소는 무조건 position 속성이 static인 요소 위로 올라옴
• position 속성이 static인 요소 간에는 HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 올라옴
• position 속성이 relative나 absolute, fixed, sticky인 요소 간에는 HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 올라옴

 

z-index가 있을 때 

사용법 : 

.first.box {
  z-index: 1;
  background: yellow;
  position: relative;
  top: 50px;
  left: 50px;
}

.second.box {
  background: tomato;
  position: relative;
}

.box {
  width: 200px;
  height: 200px;
  border: 2px solid;
  font-size: 2rem;
  text-align: center;
  line-height: 200px;
}

 

• position 속성이 static인 요소에는 z-index 속성이 0으로 고정되어 있으며 바꿀 수 없음
• z-index 속성이 양수로 설정된 요소는 position 속성이 static인 요소보다 앞으로 올라옴
• z-index 속성이 음수로 설정된 요소는 position 속성이 static인 요소보다 뒤로 내려감
• z-index 속성이 설정된 요소 간에는 크면 클 수록 앞으로 올라오고, 작으면 작을수록 뒤로 내려감 (예: z-index: 1인 요소보다 z-index: 2인 요소가 더 앞에 나오고 z-index: -1인 요소보다 z-index: -2인 요소가 더 뒤로 들어감)