IE7 设置z-index的覆盖问题的解决方法

前端技术 2023/09/09 CSS
在IE7及之前的版本中设置z-index的属性，确没有生效，查阅写资料，发现主要的结果和处理方法为：

父级元素若设置为position:relative时候，则子级元素的z-index属性会被覆盖

如

复制代码
代码如下:

<div style=\"position:relative;\">
<div style=\"position:absolute;z-index:100;width:100px;height:100px;background:red;\"></div>
</div>
<div style=\"position:relative;\">
<div style=\"position:absolute;z-index:10;width:20px;height:20px;background:black;\"></div>
</div>


在这种情况下，无论第一个red的z-index设置多高，都是会被第二个black所覆盖的

解决的方案为，设置父级元素的z-index

复制代码
代码如下:

<div style=\"position:relative;z-index:2;\">
<div style=\"position:absolute;z-index:100;width:100px;height:100px;background:red;\"></div>
</div>
<div style=\"position:relative;z-index:1;\">
<div style=\"position:absolute;z-index:10;width:20px;height:20px;background:black;\"></div>
</div>


这样，red就会覆盖black

本文地址：https://www.stayed.cn/item/25157

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案