深入浅析cssz-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社区 其它相关文章！ css html chrome php 写下你的评论吧 ! 吐个槽吧,看都看了 会员登录 | 用户注册 推荐阅读 php 全面覆盖的前端技术资源大全 本文提供了一个详尽的前端开发资源列表，涵盖了从基础入门到高级应用的各个方面，包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细] 蜡笔小新   2024-11-23 12:05:53 php selenium通过JS语法操作页面元素 做过web测试的小伙伴们都知道，web元素现在很多是JS写的，那么既然是JS写的，可以通过JS语言去操作页面，来帮助我们操作一些selenium不能覆盖的功能。问题来了我们能否通过 ... [详细] 蜡笔小新   2024-11-24 03:05:20 controller 解决 'view is not in the window hierarchy' 错误的方法 探讨并提供解决方案以应对 'view is not in the window hierarchy' 的错误提示。 ... [详细] 蜡笔小新   2024-11-26 20:15:22 php MySQL: 表 'xdb.auditlog' 被标记为已损坏，需要修复 本文介绍了如何处理MySQL数据库中表 'xdb.auditlog' 被标记为已损坏的问题，并提供了解决方案。 ... [详细] 蜡笔小新   2024-11-26 19:50:06 spring 精选Eclipse插件概览 本文介绍了多种Eclipse插件，包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等，涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细] 蜡笔小新   2024-11-26 16:20:20 php 解决 Pytest 运行时出现 FileNotFoundError 的方法 在使用 Pytest 进行测试时，可能会遇到 FileNotFoundError 错误，提示无法找到指定的文件或目录。本文将探讨该错误的原因及解决方案。 ... [详细] 蜡笔小新   2024-11-26 13:08:54 php 在Windows环境下安装FFTW并利用其库函数实现4096点FFT计算 本文介绍了如何在Windows操作系统中安装FFTW库，并详细说明了使用Visual Studio 2010进行4096点快速傅里叶变换（FFT）的步骤。包括下载预编译文件、生成库文件以及配置环境等关键环节。 ... [详细] 蜡笔小新   2024-11-26 09:26:23 sum javascript——对象的概念——函数 1 (函数对象的属性和方法) 一、创建函数函数是一种对象：Function类是对象，可以通过Function实例化一个函数，不过最多的还是利用function来创建函数。方式一：利用Function类来实例化函 ... [详细] 蜡笔小新   2024-11-26 00:19:46 php IEC60825激光产品安全标准详解 随着激光技术在全球范围内的广泛应用，尤其是激光投影显示技术的兴起，了解和遵守相关的安全标准变得尤为重要。本文将详细介绍IEC60825激光产品安全标准及其重要性。 ... [详细] 蜡笔小新   2024-11-25 19:56:13 php MySQL: 如何利用Mysqlcheck进行表的检查、修复与优化 Mysqlcheck作为MySQL提供的一个实用工具，主要用于数据库表的维护工作，包括检查、分析、修复及优化等操作。本文将详细介绍如何使用Mysqlcheck工具，并提供一些实践建议。 ... [详细] 蜡笔小新   2024-11-25 18:41:02 php LIN总线技术详解 LIN（Local Interconnect Network）总线是一种基于UART/SCI（通用异步收发器/串行接口）的低成本串行通信协议，主要用于汽车车身网络中智能传感器和执行器之间的通信。 ... [详细] 蜡笔小新   2024-11-25 17:49:58 php 解决KVM NAT模式启动时qemu-ifup-nat失败的问题 在使用KVM虚拟化技术通过NAT模式启动虚拟机时，可能会遇到qemu-ifup-nat脚本执行失败的错误。本文将详细介绍如何诊断和解决这一问题。 ... [详细] 蜡笔小新   2024-11-25 17:27:02 post 2023年1月28日网络安全热点 涵盖最新的网络安全动态，包括OpenSSH和WordPress的安全更新、VirtualBox提权漏洞、以及谷歌推出的新证书验证机制等内容。 ... [详细] 蜡笔小新   2024-11-24 10:29:06 post JavaScript 跨域解决方案详解 本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术，包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细] 蜡笔小新   2024-11-22 16:27:56 post Node.js 后端开发指南与源码解析 本文探讨了Node.js后端开发的基础知识，包括模块源码的使用方法、前后端源码的区别以及如何在命令行环境中编译Node.js源代码。 ... [详细] 蜡笔小新   2024-11-21 20:56:59 原野上的蚂蚁 这个家伙很懒，什么也没留下！ Tags | 热门标签 web filter less go cookie loops blob timestamp random string rsa format typescript io emoji netty hash python3 httpclient iostream php hashtable spring controller replace actionscrip post sum jar eval RankList | 热门文章 1PHP中函数名、常量名和变量名大小写转换及规范详解 2回忆往昔（续篇）：深入探讨昔日情怀与岁月变迁 3C++入门必备：首个博客知识点汇总 4LeetCode 1277: 计算全由1组成的正方形子矩阵数量（动态规划解法） 5【编译器】Makefile 错误：make (e=2) — 系统无法找到指定文件 6如何在Lua中调用C语言编译的动态链接库 7如何在 Windows XP 系统中安装和配置 UNIX 打印服务 8Java 中 ZonedDateTime 类的天数方法详解及示例代码 92016-2017 ACM-ICPC东北欧区域赛（NEERC 16）Gym101190E：离线查询与排序优化策略 10深入解析 FCEUX 源码：两种制作 DEB 包的方法及修改现有 DEB 包的技术细节 11在Linux系统中扩展程序运行时的内存配置 12深入解析暴力递归：从左至右的尝试模型，真实Facebook面试题目 13Kafka核心理论问题汇编【持续更新中】 14非正交网格结构对数值模拟精度的影响分析 15Python 微信机器人实现自动聊天、表情包回应及 Adidas 官方账号自动抽签功能——智能回复系统优化 PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具 Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有