왜냐하면 우리는 HTML 웹페이지가 텍스트나 이미지, 기타 요소들이 순서대로 배열되어 있기 때문에 직관적으로 2차원이라고 생각하기 때문입니다. 그러나 실제 웹페이지는 3차원이므로 요소들 간에 스택(겹침)이 발생할 수 있습니다. CSS를 통해 z-index 속성은 요소의 스택 순서를 설정합니다.
1. z-index 속성의 의미
현재 스택 컨텍스트에서 요소의 스택 수준을 확인하는 데 사용되는 문서 내 요소의 스택 순서입니다. 더 높은 스택 순서를 가진 요소는 항상 더 낮은 스택 순서를 가진 요소 앞에 나타납니다.
(1) z-index 속성 값이 높을수록 높아집니다.
(2) 요소는 음수 Z-색인 속성 값을 가질 수 있습니다.
(3) Z-색인 및 특정 숫자.
(4) z-index의 값은 단위를 따르지 않습니다.
아래와 같이:
위 그림과 같이 이 속성의 이름은 x축이 왼쪽에서 오른쪽으로, y축이 위에서 아래로 되는 좌표계에서 파생되었습니다. 화면에서 사용자까지의 방향은 z축입니다. 이 좌표계에서는 z-index 값이 높은 요소가 z-index 값이 낮은 요소보다 사용자에게 더 가깝습니다. 즉, z-index 값이 높은 요소가 사용자의 시야에 먼저 표시됩니다. , 이는 더 긴 z-index 값을 가진 요소가 다른 요소를 덮는 것을 초래하며, 이를 스태킹 또는 스태킹이라고도 합니다.
z-index 속성을 통해 더 복잡한 웹 페이지 레이아웃을 만들 수 있습니다. z-index 속성의 선택적 값은 다음 표에 나와 있습니다.
요소의 계층적 관계와 관련하여 다음 사항에 유의해야 합니다.
(1) 위치 속성이 설정되지 않은 요소 또는 위치 속성 값이 정적인 경우 나중에 정의된 요소가 이전 요소를 덮어씁니다.
(2) 위치 속성이 설정되어 있고 속성 값이 정적이 아닌 요소의 경우 이러한 요소는 위치 속성이 설정되지 않았거나 위치 속성 값이 정적인 요소를 덮어씁니다.
(3) 위치 속성 값이 정적이지 않고 z-index 속성이 정의된 요소의 경우, z-index 속성 값이 더 큰 요소는 z-index 속성 값이 더 작은 요소를 덮어씁니다. 즉, z-index 속성 값이 클수록 -index 속성 값이 높을수록 우선순위가 높습니다. 높음, z-index 속성 값이 동일하면 나중에 정의된 요소가 이전에 정의된 요소를 덮어씁니다.
(4) z-index 속성은 요소가 위치 속성을 정의하고 속성 값이 정적이 아닌 경우에만 유효합니다.
2.z-index 적용 사례
예:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>CSSz-index</title><styletype=text/css>div{width:200px;height:200px;text-align:center; 글꼴 크기:50px;line-height:200px;위치:절대;}#red{left:100px;top:100px;}#green{left:200px;top:200px;}</style></head>< body><!--Z-색인 계단식 원리: 1. 동일한 수준(또는 위치:정적)의 요소의 경우 기본적으로 문서 흐름의 뒤쪽에 있는 요소가 이전 요소를 덮어씁니다. (뒤에서 나옴) 2. 같은 레벨의 요소에 대해 위치가 고정적이지 않고 z-index가 존재하는 경우 z-index가 큰 요소가 z-index가 작은 요소를 덮는다. Z-색인이 높을수록 우선순위가 높습니다. --><divid=redstyle=배경:red;z-index:0;>A</div><divid=greenstyle=배경-색상:녹색;>B</div><divid=bluestyle=배경-색상: blue;z-index:-1;>C</div></body></html>실행 결과:
Z-색인에 대한 몇 가지 오해
일반적으로 z-index 속성은 위치 지정 요소(위치가 정적이 아닌 요소)와 함께 사용될 때만 작동한다고 말합니다. 우선 이 설명은 잘못된 것입니다. 왜냐하면 CSS3에서는 플렉스 박스의 하위 요소도 사용할 수 있기 때문입니다. . Z-색인 속성을 설정합니다.