在css中，可以利用z-index属性来设置层级，该属性可以设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；语法格式“z-index:数值;”，允许使用负值。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
在css中，可以利用z-index属性来设置层级。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（Z-index 仅能在定位元素上奏效）。
做过页面布局的同学对z-index属性应该是很熟悉了，z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
立即学习“前端免费学习笔记（深入）”；
z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
简单演示
两个DIV，第二个向上移动50px，正常情况应该是这样的
第二个div遮住了第一个div，对第二个添加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生效，那么其子元素覆盖关系有父元素决定
登录后复制
虽然第一个div的子元素的z-index比较高，但是由于其父元素z-index比第二个div低，所以第一个div子元素会被第二个div及其子元素覆盖
（学习视频分享：css视频教程）
以上就是css层级关系怎么设置的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2872877.html
赞 (0)关于作者
深入了解CSS中的选择器上一篇 2025年3月10日 18:47:37css中边框阴影怎么写下一篇 2025年3月10日 18:48:03AD推荐 黄金广告位招租... 更多推荐
相关推荐
如何解决PHP中HTML解析的复杂问题？使用voku/simple_html_dom可以！
可以通过以下地址学习 Composer：学习地址 在我的项目中，我需要从 html 页面中提取特定内容并进行操作。起初，我尝试使用正则表达式和手动解析，但这不仅耗时，而且容易出错。幸运的是，我找到了 voku/simple_html_dom…
使用Composer解决CSS前缀问题：padaliyajay/php-autoprefixer库的实践
可以通过一下地址学习composer：学习地址 在前端开发中，处理不同浏览器的兼容性问题一直是开发者们的一大挑战。特别是当你需要为 css 属性添加前缀以确保在旧版浏览器中也能正常显示时，这个过程往往是繁琐且容易出错的。最近，在开发一个新项…
关于HTML5和CSS替换使用
听到html5的都知道它的强大，如更多的描述性标记、较少依赖于插件的多媒体支持、跨文档消息通信、web sockets、客户端存储、更强大的表单、提升可访问性、先进的选择器、强大的视觉效果。费话不多说，细细说来 被废弃的标签和属性 废弃的标…
跨平台开发中的Java框架选择
跨平台 java 应用程序开发的最佳框架选择取决于项目需求。原生开发框架 (swift、kotlin) 提供最佳性能，但需要针对每个平台单独编写代码。跨平台框架 (react native、flutter) 允许代码重用，但性能可能受限。选…
eclipse怎么改黑色主题
要将 Eclipse 的主题更改为黑色，请按照以下步骤操作：1. 打开主题菜单；2. 选择黑色主题；3. 应用更改；4. 重启 Eclipse。使用第三方插件或自定义 CSS 可以进一步自定义主题。 如何修改 Eclipse 为黑色主题 要…
eclipse怎么安装emmet
Emmet 的 Eclipse 安装分以下步骤进行：安装 Emmet 插件：转到菜单栏中的“帮助”>“市场”，搜索并安装“Emmet for Eclipse”。启用 Emmet：重新启动 Eclipse，转到“窗口”>“首选项”…
idea怎么刷新项目
直接刷新项目方法：1. 单击“Reload”按钮（Ctrl + F5）；2. 右键单击项目，选择“Reload All from Disk”。强制刷新项目：1. 单击“Invalidate Caches / Restart”按钮（Ctrl …
yii框架怎么引用css
yii框架引用css的方法：1、内联样式，将CSS样式直接写在视图文件中的HTML元素上；2、内部样式表，在视图文件的head标签内使用style标签来定义CSS样式；3、外部样式表，创建一个独立的CSS文件，并在视图文件中使用link标签…
解决Laravel项目中CSS文件无法加载的问题
解决Laravel项目中CSS文件无法加载的问题，需要具体代码示例 在开发Laravel项目的过程中，有时候会遇到CSS文件无法加载的问题，这可能会导致页面样式混乱或者无法正常显示页面内容。这个问题通常是由于文件路径配置或者缓存导致的，接下…
如何解决Laravel无法加载CSS样式的情况
标题：如何解决Laravel无法加载CSS样式的情况 在使用Laravel进行Web开发的过程中，有时候会遇到CSS样式无法加载的情况，这可能会导致页面显示效果不正常。本文将介绍一些常见的原因以及解决方法，同时提供具体的代码示例供大家参考。…
