CSS Layers(층)

CSS z-index 속성은 position 속성과 함께 사용하여 Photoshop과 같은 레이어 효과를 생성할 수 있습니다.

z-index 속성은 레이어에서 요소를 겹치게 합니다.

일반적으로 HTML 페이지는 두차원 페이지로 간주됩니다. 텍스트, 이미지 및 다른 요소가 페이지에서 겹치지 않고 배치됩니다. 그러나, 수평 및 수직 위치 외에도 CSS z-index 속성은 z축에沿着堆积盒子，也就是一个堆叠在另一个堆叠之上。该属性指定一个盒子，其堆叠水平position값은 absolute, fixed 또는 relative 중 하나입니다.

각 층의 z축 위치는 렌더링의 배치 순서를 나타내는 정수로 표시됩니다. 큰 z-index의 요소는 낮은 요소와 겹칩니다.

z-index 속성은 더 복잡한 웹 레이아웃을 생성하는 데 도움이 됩니다. 다음은 CSS에서 레이어를 생성하는 방법을 보여주는 예제입니다.

.box{
　　width:　150px;
　　height:　150px;
　　opacity:　0.9;
　　position:　absolute;　　　　　　　　　　　　　　　　　　　　　　　
　　top:　30px;
　　left:　30px;
}
.red{
　　background:　#ff0000;
　　z-index:　1;
}
.green{
　　background:　#00ff00;
　　z-index:　2;
}
.blue{
　　background:　#0000ff;
　　z-index:　3;
}

실행 후 결과는 다음과 같습니다:

우리는 z-index 상단 순서 스타일은 실제 DIV에서+CSS 레이아웃 시 우리는 절대 위치 스타일을 필요로 하며, left, right를 사용하여 정위치할 수 있습니다. 다른 z-index 값으로 계층적 순서 정렬을 실현합니다.