进一步解析ie环境下z-index问题解决方法

2017-01-13 08:23:25来源:CSDN作者:BuquTianya人点击

ie的z-index问题

在写前端html页面的时候,有些层我们想着让它不论本身在dom结构的什么位置,但是都显示在屏幕的最前方,而不要被后面的元素遮盖,比如弹出的二级菜单、展开的地址选择列表、展开的礼券列表(一般都是xx列表)。

我们都知道要用z-index,让指定的元素的位置更高,从而不被覆盖,大多数浏览器下也恰如我们预想的那样,指定的元素跑到了上层,盖住了其他元素。但是在ie系列就不是这样了,ie6,ie7,ie10,ie11,360的ie兼容模式,都会这样。

ie8不这样,据说是在ie8下处理了这个bug,但是在后续的版本中居然又放出来了。

关于这个z-index的产生原因和处理方法,在Darren_聂微东 - 关注前端技术这篇IE下 z-index 的各种坑 解释和说明的特别清晰、了然,仔细看一遍,就能理解。

这里我将结合实际遇到的情况,进行进一步的说明,因为这里遇到的问题,单单是在父级增加定位属性和z-index值是不可以的,因为页面中存在多组这样的元素的时候,后续的父级元素会穿透前边的弹出列表,从而造成覆盖层级不对的问题。

看下这张图的效果,大家就明白了:

这里写图片描述

处理方法(一)

出上述问题时,html的结构大概是这样的:

<div style='position: relative;z-index:99;'>    <div>    优惠券    </div>    <div>    礼券列表(ul li)    </div></div>

也就是按照常规的处理方式,给父元素增加z-index属性。但是截图中大家也看到了,后续的“优惠券”的小方框跑到了优惠券列表的上边来了,这样效果一定说不过去的。

那么,这时候怎么处理呢?我们的方法是吧礼券列表和优惠券分开,把礼券列表往外放一层,大概类似于这样:

<div >    <div>    优惠券    </div></div><div style='position: relative;z-index:99;'>    礼券列表(ul li)</div>

那么,这样截图中的问题就没有了,变成了这样:

这里写图片描述

是不是发现,间距特别大?因为absolute元素的位置属性是相对于其父元素中最近的一个relative元素的。第一种方式relative元素在“优惠券”按钮外的div,第二种方式relative元素在“优惠券”按钮下边的div。

所以这里按照需要,再调整一下top值就可以了。这种方式的关键是,将优惠券列表的div外移到足够外层,从而不被后续元素遮盖。

如果最外层没有定位元素会怎么样

这里使用开头说道那篇文章中的例子,例子的原始代码是这样的:

<html><head><style>  .parent{width:200px; height:200px; padding:10px;}  .sub{text-align:right; font:15px Verdana;width:100px; height:100px;}  .lt50{left:50px;top:50px;}</style></head><body><div style="position:absolute; background:lightgrey;" class="parent">    <div style="position:absolute;z-index:20;background:darkgray;" class="sub">20</div>    <div style="position:absolute;z-index:10;background:dimgray;" class="sub lt50">10</div></div><div style="position:absolute;left:80px;top:80px;background:black;" class="parent">    <div style="position:absolute;z-index:2;background:darkgray;" class="sub">2</div>    <div style="position:absolute;z-index:1;background:dimgray;" class="sub lt50">1</div></div></body></html>

效果是这样的:

这里写图片描述

如果20和10所在的div的父元素继承链里面没有定位元素会怎么样呢?

<div style="position:absolute; background:lightgrey;" class="parent">

我们去掉第一个div中的position:absolute; ,变成这样:

<div style=" background:lightgrey;" class="parent">

那么效果怎么样呢?

这里写图片描述

是不是得到了我们想要的效果!!

处理方法(二)

上边说道的也就是第二种方法了,也就是让想展示在最高层的元素的父元素链中不要出现定位元素,京东的购物车页面礼券列表使用的就是这种方式。

需要注意的是,这时候元素的定位位置是相对于页面左上角点的,js需要根据用户点击位置获取到对应的“优惠券”位置,来定位优惠券列表的位置。

总体来说,控制复杂度上,第一种方式是要好一点的。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台