子元素比父元素 z-index高低的问题

news/2024/11/7 1:34:31/

一.大坑---设置父relative  z-index:0

.parent {position: relative;z-index:0;
}
.child {position: absolute;z-index:9999;
}

子元素居然比父元素的兄弟元素低一个层级!

 

原因:

当你将父元素的 position 属性设置为 relative 并且 z-index 属性设置为 0 时,子元素无论尺寸大小如何都会处于父元素的后面。这是因为在这种情况下,父元素和子元素处于同一个堆叠上下文中,并且父元素的 z-index 值是 0

根据 CSS 规范,如果一个元素具有相对定位 (position: relative) 且 z-index 值为 0,那么该元素及其子元素的层级关系是相对于它们在文档流中的顺序决定的。也就是说,无论子元素的尺寸大小如何,它们都会位于父元素的后面。

在文档流中,元素的布局和定位是相对于其前面的兄弟元素和父元素进行的。每个元素都占据一定的空间,并按照其在文档中出现的顺序进行布局。后面的元素会被放置在前面的元素之后

二.默认不设置父的z-index则z-index:auto

.parent {position: relative;z-index:auto; //默认
}
.child {position: absolute;z-index:9999;
}

默认情况下,父级元素的 z-index 属性值是 auto,而子元素的 z-index 属性值是 0。这意味着子元素的层级与父级元素的层级相同。 

然而,子元素可以通过显式地设置比父级元素更高的 z-index 值来使自己处于父级元素之上。这是因为 z-index 属性控制了元素的堆叠顺序,而不仅仅是元素的父子关系。

当一个元素的 z-index 值比其他元素的 z-index 值更高时,它就会出现在堆叠上下文的较高层级,覆盖位于较低层级的元素。这不仅适用于父子元素关系,也适用于兄弟元素关系。

所以,即使默认情况下父级元素的 z-index 值较低,子元素仍可以通过设置更高的 z-index 值而出现在父级元素之上。

需注意:

为了正常工作,z-index 属性需要与元素的 position 属性一起使用。只有当元素的 position 属性值是 relativeabsolute 或 fixed 时,z-index 才会生效


http://www.ppmy.cn/news/706881.html

相关文章

电脑远程设置的方法 电脑远程的用户名和密码怎么设置

电脑远程能帮助我们实现很多不可能,那么怎么设置电脑远程,怎么设置电脑远程的用户名和密码。下面就来进行进一步的阐述。 一、怎么设置电脑远程 电脑远程的设置并不复杂,具体步骤为: 1.鼠标移动到桌面上的“此电脑”上&#xf…

win10怎么设置计算机密码怎么设置,win10如何设置开机密码|win10设置登陆密码和账户的方法...

自从我的电脑装上了win10操作系统,我用电脑的时间都比以前更长了,因为我总想花更多的时间去挖掘win10更多的功能和操作技巧。对于以前用WIN7或win8操作系统的伙伴,相信刚开始装上win10时总是会有点不习惯,但时间长了之后你会发现已…

电脑计算机简单密码设置方法,如何设置电脑开机密码

如何设置电脑开机密码 相信很多人都有不想给别人乱上自己的电脑的想法吧?电脑怎么设置开机密码呢?那么设置电脑开机密码是最好的办法了。如何设置开机密码?简单几步就能设置好咯!这里来演示一下XP系统和win7系统的开机密码设置方法。 XP系统的方法: 第…

计算机密码设置要求包括哪些内容,电脑开机密码设置方法有哪些

一些用户为了保护自己电脑的一些重要信息数据的安全性,往往会选择为自己的电脑设置开机密码。你知道怎样设置电脑开机密码吗?下面是学习啦小编给大家整理电脑开机密码设置方法。 怎样设置电脑开机密码 电脑开机密码设置方法 怎样设置电脑开机密码:设置用…

此计算机无法设置密码,电脑该怎么设置密码

电脑该怎么设置密码 现在科技发达,几乎是每家每户都有电脑,但是有些父母在外工作,非常忙,孩子因玩游戏成绩下滑,在电脑上设置密码不失为一个好方法。那么,电脑怎么设密码?下面跟小编一起来了解一下吧! 电脑…

计算机进去pe怎么设置用户,电脑密码怎么设置,教您设置电脑开机密码

为了保障电脑重要资料的安全,不被其他同事看到,我们都会给自己的电脑设置开机密码,有了开机密码就可以让别人不能直接使用我们的电脑了,那么电脑开机密码如何设置呢?下面小编给您耐心讲解下电脑开机密码设置方法。 说到…

电脑计算机简单密码设置方法,电脑开机密码怎么设置,开机密码设置很简单!

电脑开机密码就像我们手机锁屏密码一样,都是想要自己私密的空间不被侵犯。很多小伙伴的手机都有这是锁屏密码,那么电脑开机密码又是如何设置的呢?如果你不知道如何设置,下面一起看下小编设置电脑开机密码的步骤吧。 随着科技的高速…

电脑开机密码怎么设置?

在日常工作中相信有很多人在离开公办室的时候,都不想别人能随便使用自己的电脑,因为设置了开机密码别人开机时就需要输入正确的密码才能使用,这样就可以保护个人隐私,所以有很多人问我电脑如何设置开机密码?其实设置电…