노란색 박스(z-index-1)와 파란색 박스(z-index-2)에 다음과 같이 absolute 속성값을 적용하면 파란색 박스만 나타납니다. 마치 노란색 박스가 사라진 것처럼 말입니다.
예제소스 Exercise/9장/1_ z-index/index.html
<div id="z-index-1"></div> <div id="z-index-2"></div>
예제소스 Exercise/9장/1_ z-index/syle.css
#z-index-1 {
position: absolute;
width: 100%;
height: 200px;
background-color: yellow;
}
#z-index-2 {
position: absolute;
width: 100%;
height: 200px;
background-color: blue;
}
그림 9-2 파란색 박스만 나타남