Css 为什么可以';具有z索引值的元素是否覆盖其子元素?
今天经过几个小时的调试,我艰难地学会了这条规则: 如果父元素具有任意值的z索引,则无论您如何更改子元素的CSS,父元素永远无法覆盖(堆叠在其子元素之上) 我如何用逻辑来理解这种行为?说明书上有吗Css 为什么可以';具有z索引值的元素是否覆盖其子元素?,css,css-position,z-index,Css,Css Position,Z Index,今天经过几个小时的调试,我艰难地学会了这条规则: 如果父元素具有任意值的z索引,则无论您如何更改子元素的CSS,父元素永远无法覆盖(堆叠在其子元素之上) 我如何用逻辑来理解这种行为?说明书上有吗 .container{ 宽度:600px; 高度:600px; 背景颜色:鲑鱼; 位置:相对位置; z指数:99; 填充顶部:10px; } h1{ 背景颜色:粉红色; 位置:相对位置; z指数:-1; 字体系列:monospace; } 1.如果我的z指数为正,我永远不会被父母所覆盖。 2.即使我
.container{
宽度:600px;
高度:600px;
背景颜色:鲑鱼;
位置:相对位置;
z指数:99;
填充顶部:10px;
}
h1{
背景颜色:粉红色;
位置:相对位置;
z指数:-1;
字体系列:monospace;
}
1.如果我的z指数为正,我永远不会被父母所覆盖。
2.即使我的z-指数是令人讨厌的,如果我的父母有z-指数,我也永远不会被覆盖。
确实说
z-index CSS属性设置定位元素及其子元素或flex项的z顺序
这里有一些关于儿童与后代的附加逻辑。确实如此
z-index CSS属性设置定位元素及其子元素或flex项的z顺序
这里有一些关于子代与子代的附加逻辑。考虑这一点的好方法是,每个父代都包含自己的堆栈上下文。同级元素共享父元素的堆叠顺序,因此可能相互重叠 子元素总是基于其父元素获取堆叠上下文。因此,需要一个负z索引值来将子对象推到其父(0)堆栈上下文的“后面”
从父元素的上下文中删除元素的唯一方法是使用
位置:fixed
,因为这实际上迫使它使用上下文窗口。考虑这一点的好方法是每个父元素都包含自己的堆栈上下文。同级元素共享父元素的堆叠顺序,因此可能相互重叠
子元素总是基于其父元素获取堆叠上下文。因此,需要一个负z索引值来将子对象推到其父(0)堆栈上下文的“后面”
从父元素的上下文中删除元素的唯一方法是使用position:fixed
,因为这实际上迫使它使用上下文窗口
我如何用逻辑来理解这种行为
对我来说,很难用逻辑来理解你的问题。父对象包含其子对象。一个碗可以被另一个碗盖住。但是你不能用碗盖住汤,除非你把汤从碗里放出来
设置重叠元素的顺序。父对象不能与子对象重叠
我认为这是完全合乎逻辑的
我如何用逻辑来理解这种行为
对我来说,很难用逻辑来理解你的问题。父对象包含其子对象。一个碗可以被另一个碗盖住。但是你不能用碗盖住汤,除非你把汤从碗里放出来
设置重叠元素的顺序。父对象不能与子对象重叠
我认为这是完全合乎逻辑的 您需要知道两件重要的事情:绘制顺序和堆叠上下文。如果参考,可以找到绘制图元的方式和时间
z-index
绘制元素,然后在步骤(8)中使用z-index
等于0的元素,最后在步骤(9)中使用正z-index
绘制元素,这是合乎逻辑的。我们还可以阅读以下内容的另一部分:
每个框属于一个堆叠上下文。给定堆叠上下文中的每个框都有一个整数堆栈级别,即其在z轴上相对于相同堆叠上下文中的其他框的位置。堆栈级别较高的框总是在堆栈级别较低的框前面格式化。框可能具有负堆栈级别。堆叠上下文中具有相同堆叠级别的框根据文档树顺序从下到上堆叠
也
建立本地堆栈上下文的元素将生成一个具有两个堆栈级别的框:一个用于它创建的堆栈上下文(始终为0),另一个用于它所属的堆栈上下文(由z-index属性给定)
要了解何时绘制每个元素,您需要知道其堆叠上下文和其堆叠级别(由
z-index
定义)。您还需要知道该元素是否建立了堆叠上下文。这是一个棘手的部分,因为设置z-index
将执行以下操作:
对于定位框,“z索引”属性指定:
此整数是当前堆叠上下文中生成的长方体的堆叠级别。该框还建立了一个新的堆叠上下文
auto
当前堆叠上下文中生成的长方体的堆叠级别为0。框不会建立新的堆叠上下文,除非它是根元素
现在我们有了所有的信息