`
未雨绸缪
  • 浏览: 217185 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
社区版块
存档分类
最新评论

z-index之谜

IECSS浏览器XHTMLWindows 
阅读更多

z-index 属性简介

引用 :

z-index : auto | number

auto: 默认值。

number: 无单位的整数值，可为负数 。

z-index 值较大的元素将叠加在 z-index 值较小的元素之上。对于未指定此属性的定位对象， z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。

注意 ：这个属性不会作用于窗口控件，如 select 对象。

在 IE5.5+ 中， iframe 对象开始支持此属性。而在之前的浏览器版本中， iframe 对象是窗口控件，会忽略此属性。

z-index 属性适用于定位元素（ position 属性值为 relative 或 absolute 或 fixed 的对象），用来确定定位元素在垂直于显示屏方向（称为 Z 轴）上的层叠顺序（ stack order ）。

每 一个定位元素都归属于一个 stacking context 。根元素形成 root stacking context ，而其他的 stacking context 则由定位元素产生（此定位元素的 z-index 被定义一个非 auto 的 z-index 值），定位子元素会以这个 local stacking context 为参考，用相同的规则来决定层叠顺序。并且 stacking context 和 containing block 之间并没有必然联系。

当 stacking context 一样的时候，就用 z-index 的值来决定怎样显示，如果 z-index 也相同（即 stack level 相同），则按照档中后来者居上的原则（ back-to-front ）的顺序来层叠。

当任何一个元素层叠另一个包含在不同 stacking context 元素时，则会以 stacking context 的层叠级别（ stack level ）来决定显示的先后情况。也就是说，在相同的 stacking context 下才会用 z-index 来决定先后，不同时则由 stacking context 的 z-index 来决定。例如：

定位元素 A （ z-index:100 ）里面有定位元素 A1 （ z-index:300 ），而定位元素 B 和元素 A 兄弟关系（ z-index:200 ）。你会发现无论 A1 的 z-index 是多大，也会被 z-index 是 200 的 B 所覆盖，因为 A 的 z-index 只有 100 。

阅读更详细的内容： http://www.w3.org/TR/CSS21/visuren.html#z-index

首先先来看一个演示例子的代码部分。

XHTML 部分 ：

<div id="container">
<div id="box1"> 这个 box 应该在上面 </div>
</div>
<div id="box2"> 这个 box 应该在下面， IE 浏览器会对定位元素产生一个新的 stacking context ，甚至当元素 z-index 的为 “auto” 。 </div>

CSS 部分 ：

#container { position: relative; }

#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: 20; }

#box2 { position: absolute; top: 50px; left: 160px; width: 200px; height: 200px; background-color: green; z-index: 10; }

两个 box 被完全的定位，背景色为黄色的 box1 拥有 z-index 属性值 20 ，而背景色为绿色的 box2 拥有 z-index 属性值 10 ，唯一的区别在于背 景色为黄色的 box1 被放在了一个定义了属性 position:relative 的 div 中，并且在文档源代码中位前。

根据上述代码以及 z-index 的属性简介，我们来分析上面代码将会产生的效果位置。

CSS specification 中清楚的规定了除了根元素，只有定位元素的 z-index 被定义一个非 auto 的 z-index 值才能产生新的 stacking context 。而例子中被相对定位的元素并没有定义 z-index ，即 z-index 为默认值 auto 。所以按理他不会影响子元素的层叠顺序。即背景色 为黄色的 box1 和背景色为绿色的 box2 的 stacking context 相同，即都为根元素产生的 root stacking context 。再根据规则中当 stacking context 一样的时候，就用 z-index 的值来决定怎样显示的原理，则应该 z-index 属性值 20 的背景色为黄色的 box1 在 z-index 属性值 10 背景色为绿色的 box2 之上。

下面我们在 FF 和 IE 中分别测试最终的效果，会发现 FF 中显示的效果和上面分析的效果是完全一致的，而 IE 中的显示却不一致。

迷惑 ：在 IE 的 z-index 属性值 10 背景色为绿色的 box 却在了 z-index 属性值 20 的背景色为黄色的 box1 之上，和我们分析的结果完全不一致，为什么呢？

解惑 ：其实这是 IE 浏览器（ windows ）的一个 BUG—— 在 IE 浏览器中，定位元素会产生一个新的 stacking context ，并且从 z-index 的值为 0 开始。

现在让我们来理解上面的演示在 IE 中的显示逻辑。设置了相对定位的 container 产生一个新的 stacking context ，所以其被定位的子元素背景色为黄色的 box1 以这个新的 stacking context 为参考来决定层叠顺序。而背景色为绿色的 box2 此时和背景色为黄色的 box1 的父元素 container 为同一个 stacking context ，所以他们之间按照 z-index 来决定层叠顺序，即 z-index 属性值 10 背景色为绿色的 box2 在 z-index 属性值 0 的 container 之上。

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

举个例子或许更能形象表达。

XHTML 部分 ：

<body>
<div id="container">
<div id="box1"> 为什么负值的定位元素在 IE 和 FF 下显示不一致呢？ Why ？ </div>
</div>
</body>
CSS 部分 ：

#container { position: relative; }

#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }

大家会发现在 FF 下，背景色为黄色的 box1 消失了，而 IE 下却显示。这也是我上面所说的，部分朋友武断的认为 IE 支持 z-index 的负值，而 FF 不支持 z-index 的负值的原因。我们要透过现象看本质。

在上个例子中的分析，我们知道：设置了相对位置（ position: relative ）的元素但没有给出非 auto 的 z-index 就不会产生 stacking context ，也就不会影响其子元素的层叠顺序。所以背景色为黄色的 box1 的 stacking context 为根元素产生的 root stacking context 。在上一节中我们讲到 “ 对于未指定此属性的定位对象， z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下 ” ，按照规则，应该是设定了 z-index 为 -10 的黄色的 box1 会显示在于未指定 z-index 属性的元素（比如 body ）之 下。所以在 FF 下背景色为黄色的 box1 消失了。而在 IE 中设置了相对位置的 container 会拥有 z-index 值 0 ，产生一个新的 stacking context ，背景色为黄色的 box1 在新的 stacking context 内层叠顺序，故在 IE 中会看到显示。

不过这里还有一个问题，对于上面的代码，我们再精简一下：

XHTML 部分 ：

<body>
<div id="box1"> 为什么负值的定位元素在 IE 和 FF 下显示不一致呢？ Why ？ </div>
</body>
CSS 部分 ：

#box1 { position: absolute; top: 100px; left: 210px; width: 200px; height: 200px; background-color: yellow; z-index: -10; }
大家会发现和上面没精简的代码显示的结果是一致的。但如果用上面的理解在 IE 下或许无法解释通。因为此时的理解背景色为黄色的 box1 的 stacking context 无论在 FF 下还是在 IE 下都是根元素产生的 root stacking context 。

迷惑 ：那么在 IE 浏览器中，按照规则，背景色为黄色的 box1 也应该消失，然而却没有。

解惑 ： IE 浏览器似乎给 body 元素默认了一个相对定位属性（ position: relative ） 。

通过上面两个简单的例子，我想大家应该大致知道为什么负值的 z-index 在 IE 和 FF 解析不一样，不是 FF 不支持，而是 IE 的 BUG 。

分享到：
| JavaScript 拖放(拖拽、拖动)层效果(程 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    2DShapes_Drawing_Unity-master_drawline_usingibd_LineRenderer_dra

    - 要绘制2D线条，通常会将LineRenderer的游戏对象设置为在Z轴上位于前景层，这样不会被3D物体遮挡。 - 可以通过编程方式动态添加或删除顶点，以创建动态线条，如玩家移动轨迹、路径指示等。 - 通过调整Line...

    cube:魔方游戏。 使用css3和js

    CSS3通过z-index和transform-style: preserve-3d属性来管理元素的前后关系，确保魔方的每一面都能正确地相互遮挡。 4. 动画（Animations）：CSS3动画可以用来创建平滑的过渡效果，如旋转、展开和折叠等，使游戏更加...

    [附源码+数据库+毕业论文+部署教程+配套软件]基于SpringBoot+MyBatis+MySQL+Maven+Vue的停车场管理系统，推荐！

    一、项目简介 包含：项目源码、数据库脚本等，该项目附带全部源码可作为毕设使用。 项目都经过严格调试，eclipse或者idea 确保可以运行！ 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷 二、技术实现 jdk版本：1.8 及以上 ide工具：IDEA或者eclipse 数据库: mysql5.5及以上 后端：spring+springboot+mybatis+maven+mysql 前端: vue , css，js , elementui 三、系统功能 1、系统角色主要包括：管理员、用户 2、系统功能 前台功能包括： 用户登录 车位展示 系统推荐车位 立即预约 公告展示 个人中心 车位预定 违规 余额充值 后台功能： 首页，个人中心，修改密码，个人信息 用户管理 管理员管理 车辆管理 车位管理 车位预定管理，统计报表 公告管理 违规管理 公告类型管理 车位类型管理 车辆类型管理 违规类型管理 轮播图管理 详见 https://flypeppa.blog.csdn.net/article/details/146122666

    springboot656基于java-springboot的农机电招平台毕业设计(代码+数据库+论文+PPT+演示录像+运行教学+软件下载).zip

    项目已获导师指导并通过的高分毕业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。 包含：项目源码、数据库脚本、软件工具等，该项目可以作为毕设、课程设计使用，前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。 项目都经过严格调试，确保可以运行！可以放心下载 技术组成 语言：java 开发环境：idea 数据库：MySql 部署环境：maven 数据库工具：navica 更多毕业设计https://cv2022.blog.csdn.net/article/details/124463185

    Python程序设计学习思维导图-仅供参考

    内容为Python程序设计的思维导图，适用于新手小白进行浏览，理清思路

    2024-Stable Diffusion全套资料（软件+关键词+模型）.rar

    2024-Stable Diffusion全套资料（软件+关键词+模型）.rar

    mmexport1741417035005.png

    mmexport1741417035005.png

    COMSOL三维锂离子电池全耦合电化学热应力模型：模拟充放电过程中的多物理场耦合效应及电芯内应力应变情况,COMSOL锂离子电池热应力全耦合模型,comsol三维锂离子电池电化学热应力全耦合模型锂离子

    COMSOL三维锂离子电池全耦合电化学热应力模型：模拟充放电过程中的多物理场耦合效应及电芯内应力应变情况,COMSOL锂离子电池热应力全耦合模型,comsol三维锂离子电池电化学热应力全耦合模型锂离子电池耦合COMSOL固体力学模块和固体传热模块，模型仿真模拟电池在充放电过程中由于锂插层，热膨胀以及外部约束所导致的电极的应力应变情况结果有电芯中集流体，电极，隔膜的应力应变以及压力情况等，电化学-力单向耦合和双向耦合 ,关键词： 1. COMSOL三维锂离子电池模型； 2. 电化学热应力全耦合模型； 3. 锂离子电池； 4. 固体力学模块； 5. 固体传热模块； 6. 应力应变情况； 7. 电芯中集流体； 8. 电极； 9. 隔膜； 10. 电化学-力单向/双向耦合。,COMSOL锂离子电池全耦合热应力仿真模型

    基于传递矩阵法的一维层状声子晶体振动传输特性及其优化设计与应用,声子晶体传递矩阵法解析及应用,Matlab 一维层状声子晶体振动传输特性 传递矩阵法在声子晶体的设计和应用中具有重要作用 通过调整声子

    基于传递矩阵法的一维层状声子晶体振动传输特性及其优化设计与应用,声子晶体传递矩阵法解析及应用,Matlab 一维层状声子晶体振动传输特性 传递矩阵法在声子晶体的设计和应用中具有重要作用。 通过调整声子晶体的材料、周期和晶格常数等参数，可以设计出具有特定带隙结构的声子晶体，用于滤波、减震、降噪等应用。 例如，通过调整声子晶体的周期数和晶格常数，可以改变带隙的位置和宽度，从而实现特定的频率范围内的噪声控制。 此外，传递矩阵法还可以用于分析和优化声子晶体的透射谱，为声学器件的设计提供理论依据。 ,Matlab; 一维层状声子晶体; 振动传输特性; 传递矩阵法; 材料调整; 周期和晶格常数; 带隙结构; 滤波; 减震; 降噪; 透射谱分析; 声学器件设计,Matlab模拟声子晶体振动传输特性及优化设计研究

    头部姿态估计(HeadPose Estimation)-Android源码

    头部姿态估计(HeadPose Estimation)-Android源码

    永磁同步电机FOC、MPC与高频注入Simulink模型及基于MBD的代码生成工具，适用于Ti f28335与dspace/ccs平台开发，含电机控制开发文档,永磁同步电机控制技术：FOC、MPC与高

    永磁同步电机FOC、MPC与高频注入Simulink模型及基于MBD的代码生成工具，适用于Ti f28335与dspace/ccs平台开发，含电机控制开发文档,永磁同步电机控制技术：FOC、MPC与高频注入Simulink模型开发及应用指南,提供永磁同步电机FOC，MPC，高频注入simulink模型。 提供基于模型开发（MBD）代码生成模型，可结合Ti f28335进行电机模型快速开发，可适用dspace平台或者ccs平台。 提供电机控制开发编码器，转子位置定向，pid调试相关文档。 ,永磁同步电机; FOC控制; MPC控制; 高频注入; Simulink模型; 模型开发(MBD); Ti f28335; 电机模型开发; dspace平台; ccs平台; 编码器; 转子位置定向; pid调试。,永磁同步电机MPC-FOC控制与代码生成模型

    light of warehouse.zip

    light of warehouse.zip

    考虑温度和气体排放等因素的工业乙醇发酵过程及其Matlab源码-乙醇发酵-气体排放-Matlab建模和仿真-代谢路径

    内容概要：文章深入讨论了工业乙醇发酵的基本原理及工艺流程，特别是在温度和气体排放（如CO2及其他有害气体）影响下的发酵效果分析。文章介绍了乙醇发酵的重要环节，如糖分解、代谢路径、代谢调控以及各阶段的操作流程，重点展示了如何通过Matlab建模和仿真实验来探索这两个关键环境因素对发酵过程的具体影响。通过动态模型仿真分析，得出合适的温度范围以及适时排除CO2能显著提升发酵产乙醇的效果与效率，从而提出了基于仿真的优化发酵生产工艺的新方法。 适用人群：从事生物工程相关领域研究的科学家、工程师及相关专业师生。 使用场景及目标：适用于实验室环境、学术交流会议及实际生产指导中，以提升研究人员对该领域内复杂现象的理解能力和技术水平为目标。 其他说明：附录中有详细的数学公式表达和程序代码可供下载执行，便于有兴趣的研究团队重复实验或者继续扩展研究工作。

    Tomcat资源包《Tomcat启动报错：CATALINA-HOME环境变量未正确配置的完整解决方案》

    本资源包专为解决 Tomcat 启动时提示「CATALINA_HOME 环境变量未正确配置」问题而整理，包含以下内容： 1. **Apache Tomcat 9.0.69 官方安装包**：已验证兼容性，解压即用。 2. **环境变量配置指南**： - Windows 系统下 `CATALINA_HOME` 和 `JAVA_HOME` 的详细配置步骤。 - 常见错误排查方法（如路径含空格、未生效问题）。 3. **辅助工具脚本**：一键检测环境变量是否生效的批处理文件。 4. **解决方案文档**：图文并茂的 PDF 文档，涵盖从报错分析到成功启动的全流程。 适用场景： - Tomcat 9.x 版本环境配置 - Java Web 开发环境搭建 - 运维部署调试 注意事项： - 资源包路径需为纯英文，避免特殊字符。 - 建议使用 JDK 8 或更高版本。

    java毕业设计源码 仿360buy京东商城源码 京东JavaWeb项目源代码

    这是一款仿照京东商城的Java Web项目源码，完美复现了360buy的用户界面和购物流程，非常适合Java初学者和开发者进行学习与实践。通过这份源码，你将深入了解电商平台的架构设计和实现方法。欢迎大家下载体验，提升自己的编程能力！

    java-springboot+vue的乒乓球馆预约管理系统源码.zip

    系统选用B/S模式，后端应用springboot框架，前端应用vue框架， MySQL为后台数据库。 本系统基于java设计的各项功能，数据库服务器端采用了Mysql作为后台数据库，使Web与数据库紧密联系起来。 在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。

    【javaweb毕业设计源码】大学生求职就业网

    这是一款专为大学生打造的求职就业网JavaWeb毕业设计源码，功能齐全，界面友好。它提供简历投递、职位搜索、在线交流等多种实用功能，能够帮助你顺利进入职场。无论你是想提升技术水平还是寻找灵感，这个源码都是不可多得的资源。快来下载，让你的求职之路更加顺畅吧！

    useTable(1).ts

    useTable(1).ts

    DSP实验报告汇总.pdf

    实验一： 1、进行CCS6.1软件的安装，仿真器的设置，程序的编译和调试； 2、熟悉CCS软件中的C语言编程； 3、使用按键控制LED跑马灯的开始与停止、闪烁频率； 4、调试Convolution、FFT、FIR、FFT-FIR实验，编制IIR算法并调试，并在CCS软件上给出实验结果。 实验二： 1、利用定时器周期中断或下溢中断和比较器比较值的修改来实现占空比可调的PWM波形； 2、改变PWM占空比控制LED灯的亮暗，按键实现10级LED灯亮暗调整； 3、模拟数字转换，转换过程中LED指示，并在变量窗口显示转换结果； 4、数字模拟转换，产生一个正弦波，转换过程中LED指示，转换完成后在CCS调试窗口显示波形。 实验三： 1、SCI异步串行通信实验； 2、SPI及IIC同步串行通信实验； 3、CAN现场总线串行通信实验； 4、传输过程中LED指示。 实验四： 1、电机转速控制实验。

    LINUX系统管理与配置.docx

    LINUX系统管理与配置.docx

Magicbox
Global site tag (gtag.js) - Google Analytics