IE肯定精准定位元素神密消退或被遮挡的处理方式

2021-03-12 10:52 jianzhan
发现了1个奇特的状况:
查了有关材料,高人有这样的解释:
1.当肯定精准定位层的相邻波动层的宽度不等于父层宽度时,和沒有消除波动时,IE6/7,FF中显示信息1致;
2.当肯定精准定位层的相邻波动层的宽度不等于父层宽度时,有消除波动时,IE6/7无法显示肯定精准定位层,FF显示信息;
3.当肯定精准定位层的相邻波动层的宽度等于父层宽度时,和沒有消除波动时,IE6无法显示肯定精准定位层,IE7/FF显示信息;
4.当肯定精准定位层的相邻波动层的宽度等于父层宽度时,有消除波动时,IE6/7无法显示肯定精准定位层,FF显示信息;
要处理这个BUG的方式也很简易,让肯定精准定位层不挨着波动层置放就行了,也有个更简易的方式,在肯定精准定位元素和别的元素之间加1个空白的div。
再看来看肯定精准定位元素神密消退被遮挡的状况
先掌握1下所涉及到到的几个精准定位特点:
1. 相对性精准定位元素默认设置的z-index的标值是0。
2. 当两个相对性精准定位另外出現时,编码靠后的z-index优先选择。
3. 子级遵照父级设置的z-index;假如子级设置了肯定精准定位、z-index,能够冲破父级显示信息
看下面的编码:

拷贝编码
编码以下:

<div style="position:relative; background:#FF0000; width:200px; height:100px;">
<div style="position:absolute; background:#FFFF00; width:49px; height:50px; left:106px; top:310px; z-index:100"></div>
</div>
<div style="position:relative; background:#000000; width:200px; height:100px;"></div>
<div style="position:relative; background:#9900FF; width:200px; height:100px;"></div>

编码解释:上面是3个邻近的相对性精准定位的层,在第1个层里加了个相对性其肯定精准定位的层,依照基础理论,这个肯定精准定位的元素是在3个相对性精准定位元素之上的,可是,具体却沒有显示信息。尝试设定z-index值也沒有效。
在网上处理这个bug的方法1般用hack使B为负值,来减少 B 在IE下级別
可是这类方式在z-index为负值时,造成了新的ie bug
依照精准定位的特点,ie的这个bug是能够逃避的
从表层上看 下面的层 遮挡住了上面的肯定精准定位层,具体上是下面的 层遮挡住了肯定精准定位的的父级层,要是将 该父级层 的z-index设置超过后边的层便可