div 레이어의 Z-색인 속성이 잘못 조정되는 문제를 해결하는 방법

이 글은 주로 p 레이어의 z-index 속성을 조정하는 잘못된 이유에 대한 분석과 해결 방법을 소개합니다. 도움이 필요한 친구는 이를 참고할 수 있습니다.

z-index가 잘못되었습니다.

이 작업을 수행하는 과정에서 나는 발견했습니다. 매우 간단하지만 많은 사람들이 직면하게 될 문제는 Z-INDEX 속성 설정이 유효하지 않다는 것입니다. CSS에서 레벨은 코드를 통해서만 변경할 수 있습니다. z-index가 작동하려면 작은 전제 조건이 있습니다. 즉, 요소의 위치 속성은 상대, 절대 또는 고정이어야 합니다.

1. 첫 번째 상황(z-index는 아무리 높게 설정해도 작동하지 않음):

이 상황이 발생하는 데는 세 가지 조건이 있습니다.

1 상위 태그의 위치 속성은 상대적입니다. ;
2. 질문 라벨에는 위치 속성이 없습니다(정적 제외).
3.

예: Z-색인 수준이 작동하지 않습니다. 코드는 다음과 같습니다.

<p style="POSITION: relative; Z-INDEX: 9999">  
<IMG style="FLOAT: left" src="/131101/1A5494I0-0.jpg">  
</p>

세 가지 해결 방법이 있습니다(하나라도 충분함).

1. 위치에 상대적: 절대;
2. 부동 요소에 위치 속성(예: 상대, 절대 등)을 추가합니다.

2. 두 번째 경우

IE6에서 계층 구조의 성능은 때때로 하위 태그의 z-index가 아니라 전체 DOM 트리의 첫 번째 상대 속성의 상위 태그에 따라 달라집니다( 노드 트리).

예: IE7과 IE6에는 동일한 버그가 있습니다. 이유는 매우 간단합니다. 현재 사진이 있는 p의 아버지 레벨이 매우 높지만(1000), 아버지의 아버지는 유용하지 않기 때문에 안타깝습니다. 9999의 이렇게 강한 아이에게는 첫날이 없습니다! , 코드는 다음과 같습니다.

<p style="POSITION: relative">
<p style="POSITION: relative; Z-INDEX: 1000">
<p style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </p>
</p> 
</p>

해결책: 첫 번째 상대 속성에 더 높은 수준(z-index: 1)을 추가합니다. 코드는 다음과 같습니다.

<p style="POSITION: relative; Z-INDEX: 1">  
<p style="POSITION: relative; Z-INDEX: 1000">  
<p style="POSITION: absolute; Z-INDEX: 9999"> <IMG src="/131101/1A3194V7-1.jpg"> </p>  
</p>  
</p>

위 내용이 이 기사의 전체 내용입니다. 모든 사람의 학습에 도움이 될 것입니다. 도움이 필요하면 PHP 중국어 웹사이트에서 더 많은 관련 콘텐츠를 확인하세요!

관련 추천:

CSS3 정보 rem 분석(글꼴 크기 설정)

위 내용은 div 레이어의 Z-색인 속성이 잘못 조정되는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!