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需要根据用户点击位置获取到对应的“优惠券”位置，来定位优惠券列表的位置。

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

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

python上方菜单栏不见了_Jupyter Notebook开始菜单栏Anaconda下消失的问题解决方法
Jupyter Notebook开始菜单栏Anaconda下消失的问题解决方法发布时间:2020-08-04 10:42:34 来源:亿速云阅读:98 作者:小猪这篇文章主要讲解了Jupyter ...
ros构建机器人运动学模型_ROS环境下机器人仿真模型构建方法研究.doc
ROS环境下机器人仿真模型构建方法研究 ROS环境下机器人仿真模型构建方法研究摘要: 在众多的机器人仿真平台中,ROS可以封装机器人硬件.提出在ROS环境下构建机器人的仿真模型方法.设计了机器人仿 ...
win10+python3.6+tensorflow-cpu+keras+Pycharm环境下的tensorflow配置方法
在pytorch成功配置的基础上,也尝试着把tensorflow和keras安装了一下. Win 10 Anaconda3-5.2.0-Windows-x86_64.exe python3.6 ten ...
python3.6+pytorch-cpu+Pycharm环境下的PyTorch配置方法
在踩了很多坑,好不容易安装成功后,想着整理总结一下,给后来人一个参考. 安装Anaconda 清华大学开源软件镜像站清华Anaconda安装包下载地址链接进去选择自己需要的版本就可以下载了哈.这里我 ...
Android开发环境搭建及常见问题解决方法
Android开发环境搭建及常见问题解决方法参考文章: (1)Android开发环境搭建及常见问题解决方法 (2)https://www.cnblogs.com/rwxwsblog/p/476978 ...
ubuntu下复制文件到另一个文件夹下权限不够问题解决方法
ubuntu下复制文件到另一个文件夹下权限不够问题解决方法在需要被复制的文件夹下打开终端: sudo nautilus 然后选择到需要复制到的文件夹目录下,右击粘贴.
linux 环境启动redis,linux环境下启动redis的方法
linux环境下启动redis的方法发布时间:2020-08-24 16:15:54 来源:亿速云阅读:88 作者:小新这篇文章主要介绍了linux环境下启动redis的方法,具有一定借鉴价值, ...
U盘文件夹变exe的win10环境下纯手工解决方法（无需任何软件）
U盘文件夹变exe的win10环境下纯手工解决方法(无需任何软件) 把U盘插入装有win10系统的电脑打开U盘目录(这里假设U盘目录是G:) 选中变成exe的文件,删除(放心,这里的exe是一个几k ...
python爬虫scrapy步骤mac系统_Mac中Python 3环境下安装scrapy的方法教程
前言最近抽空想学习一下python的爬虫框架scrapy,在mac下安装的时候遇到了问题,逐一解决了问题,分享一下,话不多说了,来一起看看详细的介绍吧. 步骤如下: # 在Mac上Python3环境 ...
ubuntu+php环境下的Memcached 安装方法
转载链接:http://www.jb51.net/article/28887.htm Memcached是一套分散式的高速缓存系统,当初是Danga Interactive为了LiveJournal所 ...

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

ie的z-index问题

处理方法（一）

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

处理方法（二）

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

最新文章

热门文章