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

时间:2021-05-08

在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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章