做过页面布局的同学对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及其子元素覆盖
应用
经常会有这样一种错误在table中最后各行一个td放一个p，点击弹出子菜单做一些删除、修改什么的操作，但是每次弹出的菜单都会被下面各行的p覆盖,像下面这张图一样，弹出的菜单没有在页面最上方。
写个简单的例子看看
Test html,body { height:100%; width:100%; padding:0; margin:0; } .menu { background-color:#0e0; position:relative; z-index:10; } .options { display:none; position:absolute; top: z-index:30; } .options div { background-color:#00e; }
Name Age Options Byron 24 Byron 24 Byron 24 期望样式@@##@@实际样式@@##@@
这时候习惯于增大options 的z-index却发现于事无补，为什么呢？因为每个menu的z-index相同，它们的层叠顺序按文档流顺序，无论子元素z-index调到多大，上面menu的options还是会被下面menu遮盖。这时候我的做法一般是把options放到外面，所有的menu用一个，使menu与options没有父子关系，或者干脆在点击menu的时候把它的z-index调大，这样其子元素就不会被遮盖住了。
最后
本文的例子都是以符合W3C的Chrome浏览器做验证，但在IE6，7 z-index的默认值并不是auto而是0，这样会导致很多奇怪现象，这时候就需要考虑这点了。
更多编程相关知识，请访问：编程入门！！
以上就是深入浅析css z-index（附示例）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1616112.html赞 (0)打赏微信扫一扫
支付宝扫一扫
关于作者
详解CSS行高line-height属性上一篇 2025年12月24日 05:14:46css怎么让首行文字缩进下一篇 2025年12月24日 05:14:55相关推荐
css怎么让首行文字缩进
css让首行文字缩进的方法：可以利用text-indent属性来实现，如【text-indent:50px;】。text-indent属性规定文本块中首行文本的缩进，常用于建立一个标签页效果。 属性介绍： text-indent 属性规定文本块中首行文本的缩进。 （学习视频推荐：css视频教程） 注…
详解CSS行高line-height属性
（推荐教程：CSS视频教程） 初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。 所谓行高是指文本行基线间的垂直距离。要想理解这句话…
css怎么给一个盒子加盒阴影
css给一个盒子加盒阴影的方法：可以利用box-shadow属性来添加盒阴影，如【box-shadow: 10px 10px 5px #888888;】。box-shadow属性可以设置一个或多个下拉阴影的框。 box-shadow属性可以设置一个或多个下拉阴影的框。 （学习视频分享：css视频教程…
css如何实现文字不能选中
css实现文字不能选中的方法：可以利用user-select属性来实现，如【-webkit-user-select:none;-moz-user-select:none;】。user-select属性用来控制内容的可选择性。 属性介绍： user-select是在css3 UI规范中新增的一个功能，…
css中grid布局和表格有什么区别
css中grid布局和表格的区别是：1、grid是在css中实现的，表格是在html中实现的；2、grid是固定大小的，表格是大小可变的；3、grid继承自面板元素，表格继承自块元素。 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样…
css里的display属性有啥作用
css里的display属性的作用是规定元素应该生成的框的类型。display属性是前端开发中常用的一个属性，常用的属性值有block、none、inline、inline-block。 网页上的每个元素都是一个矩形框。display 属性规定元素应该生成的框的类型。display属性是我们在前端开…
css如何实现不显示table的边框
css实现不显示table的边框的方法：可以利用border属性来实现，如【border:0;】。border属性用于设置所有的边框属性，如border-width，规定边框的宽度。 border 简写属性在一个声明设置所有的边框属性。 （学习视频分享：css视频教程） 可以按顺序设置如下属性： b…
css怎么控制字体大小
在css中可以通过属性font-size控制字体大小，其属性值可以是任意的数字大小加px单位，该属性的使用语法如“h1 {font-size:250%;}”。 推荐：《css视频教程》 首先是关于字体大小的设置，用到的CSS属性是font-size，属性值可以是任意的数字大小加px单位，注意网页常用…
怎么用css设置图片大小
用css设置图片大小的方法：首先新建一个html文件；然后使用div标签创建一个模块，并在div标签内使用img标签创建一张图片；最后在img标签内使用style来设置图片宽度和高度属性即可。 推荐：《css视频教程》 新建一个html文件，命名为test.html，用于讲解CSS怎么改变图片的大小…
css :first-child的作用是什么？
在css中，:first-child选择器的作用为：匹配其父元素中的第一个子元素，语法“E:first-child{css代码}”；该选择器需要同时满足两个条件才起作用，一个是“第一个子元素”，另一个是“这个子元素刚好是E”。 在css中，:first-child 选择器匹配其父元素中的第一个子元素…
css怎么设置背景图片的透明度
css设置背景图片的透明度的方法：可以利用opacity属性来进行设置，如【opacity: value|inherit;】。value规定不透明度，inherit规定从父元素继承opacity属性的值。 属性介绍： opacity 属性设置元素的不透明级别。 （学习视频分享：css视频教程） 语法…
css中更改透明度的属性是什么
css中更改透明度的属性是Opacity。Opacity属性设置了一个元素的透明度级别，语法为【opacity: value|inherit;】，value指定不透明度，inherit表示属性值应该从父元素继承。 本教程操作环境：windows10系统、css3，本文适用于所有品牌的电脑。 Opac…
CSS怎么控制行高？
在CSS中，可以通过line-height属性来控制行高，该属性可以通过百分比、数字、像素值等方法来设置行间的距离（行高）；语法“line-height:属性值;”，属性值可以设置为百分比值、数字、像素值和normal关键字。 本教程操作环境：windows10系统、css3，本文适用于所有品牌的电…
css中的四种基本选择器类型分别是什么
css中的四种基本选择器类型分别是标签选择器、ID选择器、类选择器和通用选择器。css中的选择器分为两大类，分别是基本选择器和扩展选择器。 本教程操作环境：windows10系统、css3，本文适用于所有品牌的电脑。 CSS的选择器分为两大类：基本选择器和扩展选择器，其中有4种基本选择器。 （相关学…
CSS元素选择器的运作原理介绍
推荐教程：CSS视频教程 在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢？ 浏览器渲染 我们先看一下…
了解css中容易被忽略特性，避免一些经常遇到的坑
CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑。 推荐教程：CSS视频教程 大小写不敏感 虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的 立即学习“前端免费学习笔记（深入）”； .test{ background-CO…
css怎么设置图片的对比度
css设置图片的对比度的方法：可以利用【filter:contrast(%)】属性来设置图片的对比度，如【filter:contrast(0%)】。filter属性定义了元素的可视效果，如模糊、饱和度、对比度等。 属性介绍： filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。 …
css如何设置鼠标的形状
css设置鼠标的形状的方法：可以利用cursor属性来进行设置，如【span.crosshair {cursor:crosshair;}】。cursor属性规定要显示的光标的类型，默认状态下光标是一个箭头。 cursor 属性规定要显示的光标的类型（形状）。 该属性定义了鼠标指针放在一个元素边界范围…
微信扫一扫 
支付宝扫一扫 
