> 웹 프론트엔드 > CSS 튜토리얼 > 음수 여백 값으로 인해 발생하는 계층 구조(z-index) 문제

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

巴扎黑
풀어 주다: 2017-05-21 10:50:25
원래의
2194명이 탐색했습니다.

이 글에서는 음수 마진 값으로 인해 발생하는 계층적(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿