z-index的从父原则

最新推荐文章于 2022-10-30 21:55:18 发布
最新推荐文章于 2022-10-30 21:55:18 发布
阅读量671 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shq91756615/article/details/114970860
版权
本文介绍了在CSS布局中遇到的一个问题，即设置z-index无效，原因是z-index的从父原则。解释了z-index属性用于设定元素的堆叠顺序，而当使用position:fixed时，元素会在新的层叠上下文中与父元素比较，导致z-index的比较范围受限。总结了两个关键点：z-index仅在position为relative, absolute, fixed时生效，以及理解从父原则对于解决z-index问题的重要性。" 82817627,7565281,C程序中的命令行参数处理,"['C语言', '命令行参数', 'Unix/Linux编程']
摘要由CSDN通过智能技术生成
写在前面

关于z-index的从父原则

1.引发问题

今天在写一个移动端页面的时候，遇到了一个问题当我在给一个设置了position:fixed以及z-index属性以后，不管我怎么更改z-index属性的大小，依然不能使得它起作用，探究其原因后，罪魁祸首是z-index的从父原则

2.z-index的定义

​ z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

3.从父原则

看一段代码

<div class="a">    
    <div
最低0.47元/天 解锁文章
shq-splendid
关注
css z-index知多少
qq_37440870的博客
08-30 1730
z-index属性指定了元素及其子元素的【z顺序】，而【z顺序】可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个
为什么z-index不生效? 我终于搞懂了CSS层叠和层叠上下文!
LoneMouse
11-15 2070
本文主要围绕写demo时出现的问题, 对z-index, 以及元素层叠, 层叠上下文的相关内容进行简单的总结
4-14z-index从父现象.html
liu1992452008的博客http://write.blog.csdn.net/configu
07-18 281
Document * { margin: 0; padding: 0; } .shayi { width: 200px; height: 200px; background: skyblue;
父子级间的z-index关系
WEB_YH的博客
11-24 1万+
自己经常用z-index改变层级，但从来没有在父子元素上使用。今天一个小伙伴在制作二级菜单的时候就碰到了这个问题，引起了我深深的思考，天啦噜，我竟然不知道！废话少说，先看代码                                  我们想通过使用z-index改变父子层级，使父亲的层级高于孩子，从而覆盖儿子，然而结果却不是我们想要的，无论我们怎么调高父亲层级，降低儿子层级都没有
html页面层级关系,CSS z-index 层级关系优先级的概念
weixin_39532352的博客
06-05 1424
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.目录顺序规则如果不对节点设定...
定位流之z-index属性
weixin_34195142的博客
03-17 110
1.固定定位是脱离标准流的，不会占用标准流的空间 2.和绝对定位有点像，也不区分行内块级元素 3.类似于前面学的背景关联方式（让某个背景图片不随滚动而滚动）让某个元素不随着滚动条的滚动而滚动 ie6不支持固定定位 定义：默认情况所以元素的z-index属性是0;作用是专门用于控制定位流元素的覆盖关系的默认情况下定位流的元素会盖住标准流的元素后面编写的定位流会盖住前面编写的定位流...
CSS-Z-index
kelly0721的博客
03-04 434
一、没有使用z-index时，元素的堆叠顺序： 根元素的背景和边框 非定位的后代块元素，按照在HTML中的出现顺序进行堆叠 定位的后代块元素，按照在HTML中的出现顺序进行堆叠 二、浮动块的堆叠顺序： 根元素的背景和边框 非定位的后代块元素，按照在HTML中的出现顺序进行堆叠 浮动块 非定位元素的后代行内元素 定位的后代块元素，按照在HTML中的出现顺序进行堆叠 三、使用z-index自定...
详解CSS中的z-index属性在层叠布局中的用法
09-24
在这个新的上下文中，子元素的`z-index`会根据父元素的层叠上下文来决定它们的堆叠顺序。 4. **`z-index`的使用**：只有在定位元素上设置`z-index`才有意义。一个更高的`z-index`值意味着元素会在Z轴上更靠前，因此...
CSS教程:网页布局定位及z-index解释
09-27
- **inherit**：元素继承其父元素的`z-index`值。 ### 3. Stacking Context 每个CSS盒模型元素都属于一个堆叠上下文（Stacking Context）。根HTML元素形成了根堆叠上下文，而其他堆叠上下文由具有非`auto` `z-...
css 相关 为什么z-index不生效？ 如何让子元素不继承父元素的opacity
sally18的博客
09-01 1668
1.为什么z-index不生效？ Z-index 仅能在定位元素上生效，所以给div的style加上z-index:-1的同时，要记得加上position:absolute;或者position:fixed;或者position:relative;，才能生效。对于默认的position:static不生效 2.如何让子元素不继承父元素的opacity 解决方案：把涉及到opacity的父元素的opcity的透明度写法换成background:rgba()形式写背景色 3.input placeh..
z-index使用注意点
Kevin@Zhang的博客
11-15 376
z-index使用注意 最近在工作中，用到这个样式，简单总结如下： 1、父容器使用了z-index，那么子容器在使用z-index是在父容器的基础上的，且不能透到父容器层下。 2、设置z-index时，如果有层的堆叠应该最好设置position: absolute; 3、层堆叠时，上层尽量控制宽高大小，避免上层遮盖下层，下层事件不能触发。 ...
16.z-index
前端学习笔记
04-23 183
z-index值表示谁压着谁，数值大的压着小的只有定位了的元素，才有z-index值，不管是相对定位/绝对定位/固定定位，浮动的不能用z-index值没有单位，默认为0如果都没有z-index值或相等，那么谁写在html后面谁在上面定位了的元素永远在没有定位的上面从父现象：父元素在上面那子元素也在上面...
z-index属性在什么情况下会失效？
徐三岁的博客
10-30 398
z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。
css z-index值小的覆盖值大的
web_ding的博客
09-01 840
css z-index值小的覆盖值大的
z-index 无效解决方法
热门推荐
MichaelAn的博客
01-02 7万+
在工作中遇到这样一个问题：设置一个DIV z-index 很大，但是仍然被其他元素遮挡。 例如：左侧的若干图标 z-index 依次增加，右侧的四个图标也需要设置 z-index。 如果界面中同一个位置有多个元素层叠，可以设置 z-index 设置不同元素的层级。 有时候遇到设置 z-index 后无效的原因，下面简单分析： 父级元素溢出隐藏或者不显示 如果父元素设置了 overflow:hidd......
css定位技巧与z-index
qq_44788228的博客
03-02 441
子绝父相(正确) 子元素可以在父元素内任意移动,父元素可以保持原有位置(因为相对定位保持元素原有位置不变) 子绝父绝 子元素可以在父元素内任意移动,但是父元素脱离标准流,其他元素占据父元素位置 子相父绝 子元素必须以原有位置为原点移动,父元素脱标 子相父相 啥也不是 层叠 当图层重叠时,可以变换优先级 z-index:0; 值为整数,越大优先级越高 优先级高的显示在越上层 ...
position: fixed如何相对父元素定位
weixin_43487782的博客
09-27 8938
在项目中遇到一个问题，项目中有一个弹框，弹框中有一个anchor组件，弹框中的内容可以滚动，而anchor组件需要相对于弹框保持固定。我们知道，position: fixed是相对于浏览器窗口进行定位，而弹框宽度是固定的，浏览器窗口的宽度则是不确定的，所以相对于浏览器窗口定位肯定不行。如何让anchor组件相对于弹框进行固定定位呢？ 查了下资料发现，虽然position:fixed是对于浏览器窗口定位的，但是只要不设置fixed元素的top，bottom，left，right，此时该元素就是相对于父元素进
【css面试题】z-index失效的情况
qq_40992225的博客
08-13 956
为什么要检查上面两种情况呢？
关于从父原则的一些测试
I am a fool.
08-09 498
从父原则： 通过用fixed absolute relative定位的元素。 其子元素和父辈元素比较z-index的时候，采用父元素的z-index值去比较。同辈之间采用自己的z-index比较。 dom结构： &lt;div class="test1"&gt; &lt;div class="test11"&gt; &lt;/div&gt; &lt;/div&gt; &l
CSS深度解析：z-index属性实战示例
由于设置了z-index，id为"ct4p"的父元素的z-index为1，而"subCt4"的z-index为0，所以即使"subCt4"在HTML结构上位于"ct4p"之后，但由于z-index较低，"subCt4"仍然会被"ct4p"遮盖。 这个实例清晰地演示了z-index如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值