margin z-index怎么使用(margin 负值引起的层级z-index问题)
类别:Web前端 浏览量:1039
时间:2021-10-28 10:37:47 margin z-index怎么使用
margin 负值引起的层级z-index问题先来看这么一段代码:<li style="height:100px;width:200px; border: solid 1px black; ">
<li style="background-color:Red;margin-top: -5px " mce_style="background-color:Red;margin-top: -5px ">
<a href="https://www.jb51.net/" mce_href="https://www.jb51.net/">开心学习网</a></li>
</li>
IE6和IE7下,内层的容器被外层覆盖,如图所示:
在IE8和ff下,外层的容器被内层覆盖,如图所示:
真是疯狂啊,如果要达到IE8的外层的容器被内层覆盖的效果,ie7可以通过触发内层的layout解决,,但是IE6却不行,只能在内层使用position:relative来解决问题,当然position:relative也解决ie7的问题,因为position:relative本身就能触发layout。
看代码:
<li style="height:100px;width:200px; border: solid 1px black; ">
<li style="background-color:Red;margin-top: -5px;position:relative" mce_style="background-color:Red;margin-top: -5px;position:relative">
<a href="https://www.jb51.net/" mce_href="https://www.jb51.net/">开心学习网</a> </li>
</li>
当然要IE8、FF达到IE6、IE7的效果就只要在外层加overflow:hidden 就可以了,看代码
<li style="height:100px;width:200px; border: solid 1px black; overflow:hidden ">
<li style="background-color:Red;margin-top: -5px;" mce_style="background-color:Red;margin-top: -5px;">
<a href="https://www.jb51.net/" mce_href="https://www.jb51.net/">开心学习网</a> </li>
</li>
您可能感兴趣
- CSS中 z-index 的用法
- flash一直在最上方,设置z-index无效
- css如何使用z-index(CSS中的z-index属性基本使用教程)
- Flash遮盖其它层,z-index无效
- margin z-index怎么使用(margin 负值引起的层级z-index问题)
- CSS中z-index层叠顺序
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
- 小米音乐可绑定QQ音乐, QQ音乐 真的会消失在小米的设备上吗(小米音乐可绑定QQ音乐)
- 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑(小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑)
- 手机QQ与小米路由器在一起 明天揭晓,敬请期待(手机QQ与小米路由器在一起)