zindex의 스택 순서는 무엇입니까? zindex의 스택 순서에 대한 자세한 설명

많은 사람들이 z-index를 처음 접하고 사용법을 모릅니다. 사실 z-index는 그다지 복잡하지도 않고 사용하기도 쉽지 않습니다. zindex? 다음은 zindex의 스택 순서를 요약한 것입니다.

1: zindex

zindex의 스택 순서는 매우 간단합니다. 우리는 각 문서 요소가 요소 앞에 있을 수도 있고 뒤에 있을 수도 있다는 것을 알고 있습니다. 이것이 우리가 흔히 스택 기술이라고 부르는 것입니다. index나 position은 포함되지 않습니다. z-index 규칙은 매우 간단하지만 실제로는 HTML에 표시되는 순서가 동일합니다. 현재 속성이 포함되면 하위 요소가 위치가 지정되지 않은 위치에 표시됩니다. .

예:

HTML代码：
<div>
    <span class="red">Red</span>
</div>
<div>
    <span class="green">Green</span>
</div>
<div>
    <span class="blue">Blue</span>
</div>

CSS 코드:

.red,.green,.blue{position:absolute;}
.red{background:red;z-index：1;}
.green{background:green;}
.blue{background:blue;}

위 코드에는 세 개의 div가 있으며 각 div에는 클래스가 포함되어 있습니다. 문서의 왼쪽 상단에 범위를 배치하면, 첫 번째 범위를 1로 설정하고 다른 두 값을 설정하지 않으면 색상이 겹칩니다.

두 가지: 스택 컨텍스트

현재 스택이 형성될 수 있습니다. 요소에는 세 가지 방법이 있습니다

1. 요소가 문서의 루트 요소인 경우

2. 요소에 위치 값과 Z-색인 값이 있습니다

3. less than 1

Three: Global stack order

스택 컨텍스트를 이해하고 나면 글로벌 스택 순서를 이해하는 것은 그리 어렵지 않을 수 있습니다. 두 개의 스택 컨텍스트가 포함되어 있으면 상위 노드를 추가하면 Forming이 됩니다. 세 번째 컨텍스트인 경우 z-인덱스는 세 번째 스택 컨텍스트에만 표시될 수 있습니다. 이를 글로벌 스택 순서라고 합니다.

위는 zindex의 쌓인 순서가 어떻게 되나요? zindex의 스택 순서에 대한 자세한 소개 HTML 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 zindex의 스택 순서는 무엇입니까? zindex의 스택 순서에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!