有关IE7 z

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

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

访问器适配性难题太令人蛋疼了,今日但是废在了IE7的z-index难题上。可又不可以由于访问器版本号低而不去处理,终究要从客户的角度着想。百度搜索了许多還是没法处理,最终google了1下,寻找了方式。

立即上事例:

拷贝编码
编码以下:

<div id="container">
<div id="box1">This box should be on top</div>
</div>
<div id="box2">
This box should not be on top;
IE however seems to create a new stacking context for positioned elements,
even when the computed z-index of that element is 'auto'.
</div>


拷贝编码
编码以下:

body { margin: 0; padding: 0; }
#container { position: relative;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow;z-index:20; }
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 10;}

这是为何呢?实际上这是IE访问器的1个BUG——在IE访问器中,精准定位元素会造成1个新的stacking context,而且从z-index的值为0刚开始。因此大家必须在这个元素的父元素上设定1个更高的z-index值。

在上述的box1中的父元素container设定1个更大的z-index就可以处理这个难题。

拷贝编码
编码以下:

body { margin: 0; padding: 0; }
#container { position: relative; z-index:30;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; }
//box1有木有z-index都没有谓了,但务必同position(relative或absolute)应用,就跟1本人
//生不上孩子1样,必须相互配合。
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }

要想遮盖住父级的同级 ,父级的z-index就务必其他大,这就跟拼老爸1样,老爸强你就强,这便是传说故事中的社会学啊。