ie7下z

日期:2021-01-20 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

处理方法:

父级元素再加position:relative;并设定z-index.
父级元素的z-index优先选择,在其中包括的元素的z-index是相对父级元素的index.
<div style="position:relative;z-index=2">
<p style="position:absolute;z-index=99"> ...(要在顶层显示信息的內容)</p>
<div>
<div style="position:relative;z-index=1">
...
<div>

上面的事例中,假若将第1个div的z-index设定为⑴,则不管p的z-index为是多少,多会被下面的div遮挡住。
相反,假若下层div的z-index也设定成2,ie7正在解释时,会依照"position:relative"的层的次序,全自动叠加,即具体值是3.
沒有加position特性时,全部值承继自父级。

在ie7下,以下编码会出現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>


ie7下显示信息为:

黑色到了鲜红色的上面。

这是由于肯定精准定位元素的“有精准定位特性(relative或absolute)的父元素”在3D渲染层级时起到了关键功效,前面的被后边的遮盖了。

处理方法便是给有精准定位特性的父元素设定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>


这样便可以一切正常显示信息了: