深入浅析cssz-index（附示例）

作者：原野上的蚂蚁 | 来源：互联网 | 2020-11-24 14:39

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

做过页面布局的同学对z-index属性应该是很熟悉了，z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。（推荐教程：CSS视频教程）

简单演示

两个p，第二个向上移动50px，正常情况应该是这样的

第二个p遮住了第一个p，对第二个添加z-index属性

结果就会变成这个样子，z-index 最简单的应用就是这样

只对定位元素有效

z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，也就是说如果元素是没有定位的，对其设置的z-index会是无效的。

虽然第一个p的z-index比第二个p大，但是由于第一个p未定位，其z-index属性未起作用，所以仍然会被第二个p覆盖。

相同z-index谁上谁下

相同的z-index其实有两种情况

1.如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。

2.如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素

父子关系处理

如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方

虽然子元素设置z-index比父元素小，但是子元素仍然出现在父元素上方

如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效

子元素z-index=-5生效，被父元素覆盖

兄弟之间子元素

如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定

虽然第一个p的子元素的z-index比较高，但是由于其父元素z-index比第二个p低，所以第一个p子元素会被第二个p及其子元素覆盖

写个简单的例子看看

Name	Age	Options
Byron	24	Options Opion1 Opion2 Opion3 Opion4
Byron	24	Options Opion1 Opion2 Opion3 Opion4
Byron	24	Options Opion1 Opion2 Opion3 Opion4

期望样式

最后

本文的例子都是以符合W3C的Chrome浏览器做验证，但在IE6，7 z-index的默认值并不是auto而是0，这样会导致很多奇怪现象，这时候就需要考虑这点了。

更多编程相关知识，请访问：编程入门！！

以上就是深入浅析css z-index（附示例）的详细内容，更多请关注第一PHP社区其它相关文章！

推荐阅读

int
解决Selenium浏览器实例化位置导致的闪退问题

本文探讨了在使用Selenium进行自动化测试时，由于webdriver对象实例化位置不同而导致浏览器闪退的问题，并提供了详细的代码示例和解决方案。 ... [详细]

蜡笔小新 2024-12-23 16:09:49
int
自己用过的一些比较有用的css3新属性【HTML】

web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开 ... [详细]

蜡笔小新 2024-12-24 19:26:54
settings
如何清除Chrome浏览器地址栏的特定历史记录

在使用Chrome浏览器时，你可能会发现地址栏保存了大量浏览记录。有时你可能希望删除某些特定的历史记录而不影响其他数据。本文将详细介绍如何单独删除地址栏中的特定记录以及批量清除所有历史记录的方法。 ... [详细]

蜡笔小新 2024-12-22 17:14:01
client
利用Selenium与ChromeDriver实现豆瓣网页全屏截图

本文介绍了一种使用Selenium和ChromeDriver结合Python代码，轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行，而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]

蜡笔小新 2024-12-22 15:17:55
int
Python自动化测试入门：Selenium环境搭建

本文详细介绍如何在Python环境中安装和配置Selenium，包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外，还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]

蜡笔小新 2024-12-21 10:48:56
tree
次小生成树问题的高效求解

本文探讨了如何通过最小生成树（MST）来计算严格次小生成树。在处理过程中，需特别注意所有边权重相等的情况，以避免错误。我们首先构建最小生成树，然后枚举每条非树边，检查其是否能形成更优的次小生成树。 ... [详细]

蜡笔小新 2024-12-28 13:42:43
int
QUIC协议：快速UDP互联网连接

QUIC（Quick UDP Internet Connections）是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP，并结合了TLS级别的安全性，提供了更高效、更可靠的互联网通信方式。 ... [详细]

蜡笔小新 2024-12-28 12:33:18
int
深入理解OAuth认证机制

本文介绍了OAuth认证协议的核心概念及其工作原理。OAuth是一种开放标准，旨在为第三方应用提供安全的用户资源访问授权，同时确保用户的账户信息（如用户名和密码）不会暴露给第三方。 ... [详细]

蜡笔小新 2024-12-28 12:07:46
cmd
在Linux系统中配置并启动ActiveMQ

本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]

蜡笔小新 2024-12-27 14:38:54
cmd
如何在WPS Office for Mac中调整Word文档的文字排列方向

本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤，用户可以轻松更改文本的水平或垂直排列方式，以满足不同的排版需求。 ... [详细]

蜡笔小新 2024-12-27 12:34:14
cmd
存储器层次结构、随机访问存储器与数据存取机制

理解存储器的层次结构有助于程序员优化程序性能，通过合理安排数据在不同层级的存储位置，提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器（SRAM）和动态随机访问存储器（DRAM）的工作原理及其应用场景，并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]

蜡笔小新 2024-12-27 12:06:47
cmd
几何画板展示电场线与等势面的交互关系

几何画板是一款功能强大的物理教学软件，具备丰富的绘图和度量工具。它不仅能够模拟物理实验过程，还能通过定量分析揭示物理现象背后的规律，尤其适用于难以在实际实验中展示的内容。本文将介绍如何使用几何画板演示电场线与等势面之间的关系。 ... [详细]

蜡笔小新 2024-12-27 10:46:07
int
使用Windows批处理脚本监控并重启Java应用程序

本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序，确保其持续稳定运行。脚本每30分钟检查一次，并在需要时重启Java程序。同时，它会将任务结果发送到Redis。 ... [详细]

蜡笔小新 2024-12-27 10:44:39
int
MySQL中枚举类型的所有可能值获取方法

本文介绍了一种在MySQL数据库中查询枚举（ENUM）类型字段所有可能取值的方法，帮助开发者更好地理解和利用这一数据类型。 ... [详细]

蜡笔小新 2024-12-27 10:36:44
web
解析：IE 浏览器中 IMG 元素 alt 属性的误用及其正确处理方式

在跨浏览器开发中，一个常见的问题是关于如何在鼠标悬停时显示图片提示信息。本文深入探讨了 IE 浏览器对 IMG 元素 alt 属性的特殊处理，并提供了最佳实践建议。 ... [详细]

蜡笔小新 2024-12-23 12:35:10

原野上的蚂蚁

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章