css 设置层级关系,css层级关系怎么设置-程序员宅基地
技术标签： css 设置层级关系
在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视频教程)
智能推荐
解决vscode顶部窗口没有显示原因_volar编辑器分割功能没看到-程序员宅基地
文章浏览阅读6k次。解决vscode顶部窗口没有显示原因的问题（gitlab）产生的原因解决方法欢迎订阅前端进阶订阅号产生的原因vscode 查看→外观 没有选择全屏模式解决方法按F11按键欢迎订阅前端进阶订阅号如果感觉对您的学习工作有帮助，请将它分享给需要的人，感谢支持..._volar编辑器分割功能没看到
TCP/IP基础知识——TCP/IP分层模型-程序员宅基地
文章浏览阅读4.5k次。1、TCP/IP与OSI参考模型：_ip分层
大专生面试阿里P7居然过了，Java高级程序员面试集合-程序员宅基地
文章浏览阅读853次，点赞13次，收藏20次。从设计思想解读开源框架，一步一步到Spring、Spring5、SpringMVC、MyBatis等源码解读，我都已收集整理全套，篇幅有限，这块只是详细的解说了23种设计模式，整理的文件如下图一览无余！ring5、SpringMVC、MyBatis等源码解读，我都已收集整理全套，篇幅有限，这块只是详细的解说了23种设计模式，整理的文件如下图一览无余！无论是一个初级的 coder，高级的程序员，还是顶级的系统架构师，应该都有深刻的领会到设计模式的重要性。程序员A：B，你这段代码使用的是XXX设计模式对吗？
南加大的计算机科学与工程,2019上海软科世界一流学科排名计算机科学与工程专业排名南加州大学排名第15...-程序员宅基地
文章浏览阅读459次。2019上海软科世界一流学科排名计算机科学与工程专业排名指标首先计算大学在每项指标上的得分，具体为大学在一项指标上的数值除以该项指标的最大值(开根号)再乘以100。然后各指标得分除以100再乘以相应权重进行累加得到该校总分。CNCI为相对指标，论文数量较少时CNCI不够稳定。因此在计算该指标的得分时，一个学科的CNCI最大值设置为该学科所有大学的CNCI平均值的2倍或者该学科所有大学中CNCI的实..._南加大软科排名
css3如何实现字体放大缩小动画_css字体放大缩小动画-程序员宅基地
文章浏览阅读3.2k次。css3实现字体放大缩小动画效果，按钮看起来是动的，以吸引用户_css字体放大缩小动画
RandomAccessFile 读取和存储文件_randomaccessfile读取文件-程序员宅基地
文章浏览阅读375次。RandomAccessFile 读取和存储文件;java读取大文件_randomaccessfile读取文件
随便推点
这应该是最详细的Python入门基础语法汇总了！新手小白请学习起来_python语法-程序员宅基地
文章浏览阅读1.8k次，点赞4次，收藏19次。input 用户自己输入值print 打印值 可以输出多个变量%d|%s 用于输出变量时占位。_python语法
【Flink】Flink CDC介绍和原理概述_flink cdc原理-程序员宅基地
文章浏览阅读3.6w次，点赞41次，收藏197次。Flink CDC概述和原理什么是CDC？基于查询的CDC 和 基于日志的CDCFlink CDCFlink CDC原理简述基于 Flink SQL CDC 的数据同步方案实践什么是CDC？CDC是（Change Data Capture 变更数据获取）的简称。核心思想是，监测并捕获数据库的变动（包括数据 或 数据表的插入INSERT、更新UPDATE、删除DELETE等），将这些变更按发生的顺序完整记录下来，写入到消息中间件中以供其他服务进行订阅及消费。基于查询的CDC 和 基于日志的CDCCD_flink cdc原理
MATLAB源码-第55期】matlab代码基于m序列的多用户跳频通信系统仿真，输出各节点波形图。_m序列波型-程序员宅基地
文章浏览阅读428次。通常，跳频系统的频率合成器输出什么频率的载波信号是受跳频指令控制的，跳频器是由频率合成器和跳频指令发生器构成的。在时钟的作用下，频率合成器不断地改变其输出载波的频率，跳频指令发生器不断地发出控制指令。首先，为了完成解跳功能，用同相干解调类似的方法将发送信号已知的伪随机的载波与接收信号进行混频，再经过低通滤波器进行滤波，即可得到到解跳后的信号，以便以后基带调制的进行。跳频扩频调制通过伪随机地改变发送载波频率，用跳变的频率来调制基带信号，得到载波频率不断变化的射频信号。3.加性高斯白噪声信道。_m序列波型
Vue工具库VueUse的具体用法_usevue-程序员宅基地
文章浏览阅读2.9w次，点赞11次，收藏71次。前言上次在看前端早早聊大会中， 尤大大再一次提到了 VueUse 的一个库。 好奇了一下，点看看了看。好家伙啊， 我直接好家伙。这不就是曾经我也想自己写一个 vue 版的 hooks 库吗？（因为我觉得 vue3 和 hooks 太像了） 可是我还不太会， 你现在直接把我的梦想给破灭了，下面我们一起来看看吧！VueUse 作者 Anthony Fu 分享可组合的 Vue_哔哩哔哩_bilibili什么是 VueUseVueUse不是Vue.use，它是为Vue 2和3服务的一套Vue Composi_usevue
嵌入式学习之QT学习 ----1 QT环境搭建（Windows）_安装qt程序的时候勾选哪些和嵌入式有关的-程序员宅基地
文章浏览阅读1.7k次。想了又想，之后的设计基于QT系统大概会比较容易一些，就学习一下基础知识吧。1、什么是QT？QT是一个跨平台的、C++、图形用户界面，应用程序开发框架。2、通过学习，将会获得哪些知识？掌握QT环境搭建C++入门掌握使用QT开发windows平台上位机，如：串口调试助手、网络调试助手等掌握发布自己开发的windows上位机掌握在ARM板上移植QT操作系统掌握把QT程序移植到ARM开发板上运行掌握使用QT驱动程序，如：点亮一个LED掌握QT开发手机APP学习远程调试ARM板子上的QT程序_安装qt程序的时候勾选哪些和嵌入式有关的
【算法】三、回溯法_算法策略 回溯法-程序员宅基地
文章浏览阅读978次，点赞2次，收藏10次。回溯法其实就是不断地试探，看前方的路是否可以走，如果不行就退回一步，再换一个办法。_算法策略 回溯法