z-index在IE中的迷惑

最新推荐文章于 2014-08-07 11:49:16 发布
最新推荐文章于 2014-08-07 11:49:16 发布
阅读量93 收藏
点赞数
分类专栏： Div / Css / XML / HTML5 文章标签： IE 浏览器 CSS Google BBS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_5904/article/details/81956141
版权

今天在写页面的时候发现头部导航栏的下拉菜单，被下面的画中画遮挡住了，然后把导航的下拉菜单样式设置为z-index:999;但是在IE下没起什么作用，而在FF下起作用了。然后又把画中画的样式设置为z-index:-99; 在IE下还是没反映。囧。。。

 

IE下:                                 FF下:
   

 

 

然后在Google里搜索了一下z-index的相关属性，找了半天找到一篇文章。才发现原来又是IE的BUG。。。
解惑： 其实这是 IE 浏览器（windows）的一个 BUG ——在 IE 浏览器中，定位元素会产生一个新的 stacking context，并且从 z-index 的值为 0 开始。



CSS specification 中清楚的规定了除了根元素，只有定位元素的 z-index 被定义一个非 auto 的 z-index 值才能产生新的 stacking context。一般被相对定位的元素并没有定义 z-index，即 z-index 为默认值 auto 。所以按理他不会影响子元素的层叠顺序。而设置了相对定位的 head 产生一个新的 stacking context，所以其被定位的子元素 下拉菜单 以这个新的 stacking context 为参考来决定层叠顺序。



其实IE这个BUG的影响范围很广，只是大家平时不太注意。下面来说明一个最常见的出现情况 z-index 的负值解析，很多朋友因为这个 BUG 的存在甚至武断的认为 IE 支持 z-index 的负值，而FF不支持 z-index 的负值。



我们知道：设置了相对位置（position: relative）的元素但没有给出非 auto 的 z-index 就不会产生 stacking context，也就不会影响其子元素的层叠顺序。所以 下拉菜单 的 stacking context 为根元素产生的 root stacking context。“对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下”，按照规则，应该是设定了 z-index 为-99的 画中画 会显示在于未指定 z-index 属性的元素（比如 body）之下。所以在FF下正常。而在IE中设置了相对位置的 head 会拥有 z-index 值0，产生一个新的 stacking context，下拉菜单 在新的 stacking context 内层叠顺序，故在 IE 中会被遮挡住。

 

z-index可以控制div的显示层级，但是FF和IE对z-index的解析机制不一样。



FF中解析z-index，只要设置div的z-index属性就可以控制了。



IE中解析z-index，不仅要设置div的z-index属性，还必须设置div的父div的z-index属性，这样才可以控制。

 

解决办法：在 head 样式中添加z-index:99; 终于在IE下显示为正常了，FF下也正常。


其实当时我也不是靠这文章说的方法解决的，只是让我知道了原来这是ie bug。

 


<div id=test1></div>

<div id=test2>
<div id=test3></div>
</div>

如果要让test3在test1的上面，那必须这样写

 


<div id=test style="positon:relative;z-index:1 ;"></div>
<div id=test2 style="position:relative;z-index:2 ">
<div id=test3 style="position:absolute; left:0;top:0;"></div>
</div>

关键z-index要写在父div ，


另外，td不能这样写


<td style="position:relative;z-index:2 ">
<div id=test3 style="position:absolute; left:0;top:0;"></div>
</td>

 


IE虽然支持，但FF不支持TD这样写的，必须要加个div或者<span>包起来。

 

 

 

阅读更详细的内容：

 

http://www.w3.org/TR/CSS21/visuren.html#z-index

http://bbs.blueidea.com/thread-2872952-1-1.html

 

 

 

 

 

iteye_5904
关注
专栏目录
css z-index 在IE中的迷惑
01-19
z-index属性简介 ...在IE 5.5＋中，iframe 对象开始支持此属性。而在之前的浏览器版本中，iframe 对象是窗口控件，会忽略此属性。 z-index属性适用于定位元素（position 属性值为 relative 或 ab
解决IE下z-index的bug
weixin_34364135的博客
04-21 113
IE下z-index有很奇葩的BUG，就是z-index级别不生效。解决方案只有在 该元素的父级元素添加 posotion和z-index，就能识别了。 element{position:relative;z-index:99;} z-index实现的条件必须要制定position条件，参考页面。 IE6下z-index犯癫不起作用bug的初步研究 转载于:https://www.c...
css中z-index,css z轴,div中z-index在IE中迷惑
09-11 377
css中z-index属性是用得比较多的一个，也就是常说的css z轴，如何在div中z-index合理使用会使网页更加美观，先往下看。   z-index属性简介 引用: z-index : auto | number auto：默认值。 number：无单位的整数值，可为负数。 z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此
z-index在IE中的迷惑（二）
行进中的蜗牛……
07-02 98
IE中z-index BUG 首先先来看一个演示例子的代码部分。 XHTML 部分： 这个box应该在上面 这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。 CSS 部分： #container { position: relative...
Z-Index在IE中的迷惑
weixin_34077371的博客
05-27 55
z-index属性简介 引用: z-index : auto | number auto：默认值。number：无单位的整数值，可为负数。 z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而z-index 值为负数的对象在其之下。 注意：这个属性不会作用于窗口控件，如selct 对象。在IE 5...
z-index在IE中的迷惑（一）
weixin_34327761的博客
12-28 96
z-index 属性简介 z-index : auto | numberauto: 默认值。number: 无单位的整数值，可为负数 。 z-index 值较大的元素将叠加在 z-index 值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。 注意：这个属性不会作用于窗口控件，如 select 对象。在...
[转]z-index的IE之旅
aidenliu的专栏
08-12 488
<br /><br />z-index属性简介<br /><br />引用:<br /><br />z-index : auto | number <br /><br />auto: 默认值。<br /><br />number: 无单位的整数值，可为负数 。<br /><br />z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。<br /><br />注意：这个属性不会作用于
360极速浏览器对于z-index的特殊处理方式
skyhitnow的专栏
08-07 2415
很多人发现在给已经定位的层设置了相应的z-index值后，在IE,chrome,opera等浏览器中各层能够按照z-index的值正确堆叠，而在360浏览器中极速模式下却不能正确显示。经测试，360浏览器对于已定位层的z-index处理算法似乎有别于其他主流浏览器，如chrome等。 W3c的官方教程有如下两段话： “绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对
IE中的z-index迷惑（2）
网页标准学习文档
10-08 513
　　IE中z-index的BUG。首先看下面的代码：XHTML部分：这个box应该在上面这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。CSS部分：#container { position: relative; }#box1 { position: absolute;
CSS-----z-index
chiyinqi7960的博客
07-26 100
z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。 目录 属性 应用实例...
学习CSS网页制作：z-index在IE中的迷惑.pdf
10-02
本文将深入探讨`z-index`在Internet Explorer（IE）中的表现及其可能带来的迷惑。 `z-index`属性可以设置为`auto`或一个无单位的整数，包括负数。默认情况下，如果未指定`z-index`，元素的值为`auto`。如果`z-index...
智慧旅游景区解决方案PPT(50页).pptx
最新发布
09-21
智慧旅游解决方案利用云计算、物联网和移动互联网技术，通过便携终端设备，实现对旅游资源、经济、活动和旅游者信息的智能感知和发布。这种技术的应用旨在提升游客在旅游各个环节的体验，使他们能够轻松获取信息、规划行程、预订票务和安排食宿。智慧旅游平台为旅游管理部门、企业和游客提供服务，包括政策发布、行政管理、景区安全、游客流量统计分析、投诉反馈等。此外，平台还提供广告促销、库存信息、景点介绍、电子门票、社交互动等功能。 智慧旅游的建设规划得到了国家政策的支持，如《国家中长期科技发展规划纲要》和国务院的《关于加快发展旅游业的意见》，这些政策强调了旅游信息服务平台的建设和信息化服务的重要性。随着技术的成熟和政策环境的优化，智慧旅游的时机已经到来。 智慧旅游平台采用SaaS、PaaS和IaaS等云服务模式，提供简化的软件开发、测试和部署环境，实现资源的按需配置和快速部署。这些服务模式支持旅游企业、消费者和管理部门开发高性能、高可扩展的应用服务。平台还整合了旅游信息资源，提供了丰富的旅游产品创意平台和统一的旅游综合信息库。 智慧旅游融合应用面向游客和景区景点主管机构，提供无线城市门户、智能导游、智能门票及优惠券、景区综合安防、车辆及停车场管理等服务。这些应用通过物联网和云计算技术，实现了旅游服务的智能化、个性化和协同化，提高了旅游服务的自由度和信息共享的动态性。 智慧旅游的发展标志着旅游信息化建设的智能化和应用多样化趋势，多种技术和应用交叉渗透至旅游行业的各个方面，预示着全面的智慧旅游时代已经到来。智慧旅游不仅提升了游客的旅游体验，也为旅游管理和服务提供了高效的技术支持。
智慧旅游实景三维智慧景区建设方案PPT(70页).pptx
09-21
智慧旅游解决方案利用云计算、物联网和移动互联网技术，通过便携终端设备，实现对旅游资源、经济、活动和旅游者信息的智能感知和发布。这种技术的应用旨在提升游客在旅游各个环节的体验，使他们能够轻松获取信息、规划行程、预订票务和安排食宿。智慧旅游平台为旅游管理部门、企业和游客提供服务，包括政策发布、行政管理、景区安全、游客流量统计分析、投诉反馈等。此外，平台还提供广告促销、库存信息、景点介绍、电子门票、社交互动等功能。 智慧旅游的建设规划得到了国家政策的支持，如《国家中长期科技发展规划纲要》和国务院的《关于加快发展旅游业的意见》，这些政策强调了旅游信息服务平台的建设和信息化服务的重要性。随着技术的成熟和政策环境的优化，智慧旅游的时机已经到来。 智慧旅游平台采用SaaS、PaaS和IaaS等云服务模式，提供简化的软件开发、测试和部署环境，实现资源的按需配置和快速部署。这些服务模式支持旅游企业、消费者和管理部门开发高性能、高可扩展的应用服务。平台还整合了旅游信息资源，提供了丰富的旅游产品创意平台和统一的旅游综合信息库。 智慧旅游融合应用面向游客和景区景点主管机构，提供无线城市门户、智能导游、智能门票及优惠券、景区综合安防、车辆及停车场管理等服务。这些应用通过物联网和云计算技术，实现了旅游服务的智能化、个性化和协同化，提高了旅游服务的自由度和信息共享的动态性。 智慧旅游的发展标志着旅游信息化建设的智能化和应用多样化趋势，多种技术和应用交叉渗透至旅游行业的各个方面，预示着全面的智慧旅游时代已经到来。智慧旅游不仅提升了游客的旅游体验，也为旅游管理和服务提供了高效的技术支持。
基于深度学习实现的半监督学习例子.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
关于APx测试耳机音频的参数设置及步骤 关于APx测试耳机音频的参数设置及步骤
09-21
关于APx测试耳机音频的参数设置及步骤 关于APx测试耳机音频的参数设置及步骤
jQuery背景可滑动的导航菜单代码，鼠标经过导航时导航背景可滑动，兼容主流浏览器
09-21
jQuery背景可滑动的导航菜单代码，鼠标经过导航时导航背景可滑动，兼容主流浏览器 使用方法： 1、引入reset.css、index.css、jquery-1.7.2.min.js库文件，及jquery.movebg.js插件 2、在文件中加入<!-- 代码 开始 --><!-- 代码 结束 -->区域代码 3、移动的滑动可根据需要自由修改外观
Matlab实验指导书.doc
09-21
Matlab实验指导书.doc
S7-1200 计数器介绍
09-21
PLC
IE浏览器下的CSS z-index问题深度解析
在IE浏览器中，z-index的实现有时会带来一些困扰，特别是在IE6中： 1. **拼爹的时代** 在IE6中，z-index的行为受到其父元素的影响。即使子元素的z-index设置得很高，如果其父元素没有设置z-index，子元素的堆叠...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值