CSS에서 z-index 제어 요소가 어떻게 겹치나요?

z-index 스택 순서 이해

스택 순서는 웹페이지에서 요소가 겹치는 순서를 결정합니다. z-index 속성은 스택 순서를 제어하는 ​​데 사용되며, 다른 요소 앞에 나타나야 하는 요소에 더 높은 값을 부여합니다.

위치 및 z-index 이해

Z-인덱스는 위치가 지정된 요소(절대, 상대, 고정, 고정)와 위치가 있는 플렉스 또는 그리드 항목에 적용됩니다. static.

스태킹 컨텍스트

요소의 위치가 지정되면 z-index 범위를 요소와 해당 하위 항목으로 제한하는 스택 컨텍스트가 생성됩니다.

적재순서

적재순서가 없는 경우 z-index, 요소는 순서를 따릅니다:

1. 루트 요소의 배경 및 테두리
2. 위치가 지정되지 않은(정적) 블록, 그 다음 부동 요소(나타나는 순서대로)
3. 인라인 요소
4. 위치된 요소(순서대로) 외관)

z-index 포함:

1. 루트 요소의 배경 및 테두리
2. z-index < 0
3. 위치 지정되지 않은 블록, 그 다음 부동 요소(나타나는 순서대로)
4. 인라인 요소
5. 위치 지정된 요소(나타나는 순서대로)
6. 위치됨 z-색인 > 0

예

혼합 형제 div:

• Div1: 위치: 상대, z- 색인: 10;
• Div2: position: static;
• Div3: position:fixed, z-index: 20;

Div3은 Div1과 Div2와 겹치고 Div1은 Div1과 겹칩니다. Div2와 겹칩니다.

중첩 및 혼합 divs:

• Div1: 위치: 절대, Z-색인: 10;
• Div2: 위치: 정적;
• Div3: 위치: 고정, Z-색인: 20;
• Div4: 위치: 상대, Z-색인: 15;

Div3은 모든 div와 겹칩니다. Div4는 Div1과 Div2와 겹치고 Div1은 Div2와 겹칩니다.

위 내용은 CSS에서 z-index 제어 요소가 어떻게 겹치나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!