css中margin负值引起的层级z-index问题

先看一段代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="height:100px;width:200px; border: solid 1px black; ">
<div style="background-color:Red;margin-top: -5px ">
<a href="">hello word</a>
</div>
</div>
</body>
</html>

IE6和IE7下,内层的容器被外层覆盖,

在IE8和ff下,外层的容器被内层覆盖,如图所示:

image

如果要达到IE8的外层的容器被内层覆盖的效果,ie7可以通过触发内层的layout解决,,但是IE6却不行,只能在内层使用position:relative来解决问题,当然position:relative也解决ie7的问题,因为position:relative本身就能触发layout。

<div style="height:100px;width:200px; border: solid 1px black;">
<div style="background-color:Red;margin-top: -5px ;position:relative"">
<a href="">hello word</a>
</div>
</div>

当然要IE8、FF达到IE6、IE7的效果就只要在外层加overflow:hidden 就可以了,看代码

<div style="height:100px;width:200px; border: solid 1px black; overflow:hidden">
<div style="background-color:Red;margin-top: -5px ">
<a href="">hello word</a>
</div>
</div>

~~~

未经允许不得转载:WEB前端开发 » css中margin负值引起的层级z-index问题

赞 (1)