음수 여백 값으로 인해 발생하는 계층 구조(z-index) 문제

이 글에서는 음수 마진 값으로 인해 발생하는 계층적(z-index) 문제에 대한 해결 방법을 주로 소개합니다. 필요한 친구들이 참고할 수 있습니다. 먼저 이 코드를 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다:

color:Red;margin-top: -5px " mce_style="배경-색상:Red;margin-top: -5px ">
스크립트 홈

IE6 및 IE7 , 내부 레이어 그림과 같이 컨테이너는 외부 레이어로 덮여 있습니다.

IE8 및 ff에서는 그림과 같이 외부 컨테이너가 내부 레이어로 덮여 있습니다. 🎜>

정말 미친 짓입니다. IE8의 외부 컨테이너가 내부 레이어로 덮이는 효과를 얻으려면 IE7에서는 내부 레이어의 레이아웃을 트리거하여 문제를 해결할 수 있지만 IE6에서는 그렇지 않습니다. 문제를 해결하려면 내부 레이어에서만 position:relative를 사용하면 position:relative 자체가 레이아웃을 트리거할 수 있기 때문에 ie7의 문제도 해결됩니다. 코드 보기:

코드 복사 코드는 다음과 같습니다:

p style="Background-color :Red;margin-top : -5px;position:relative" mce_style="배경-색상:Red;margin-top: -5px;position:relative">

스크립트 홈

물론 IE8과 FF에서 IE6과 IE7의 효과를 얻으려면 외부 레이어에 Overflow:hidden만 추가하면 됩니다.

코드 복사

코드는 다음과 같습니다.

< a href="http://www.jb51.net/" mce_href="http://www.jb51.net/">스크립트 홈< /a>

위 내용은 음수 여백 값으로 인해 발생하는 계층 구조(z-index) 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!