-
创建层叠上下文的途径2查看全部
-
更完整的7阶层叠水平查看全部
-
七阶层叠水平
查看全部 -
著名的7阶层叠水平
查看全部 -
jjkj查看全部
-
.box{ background-color:#000; position:absulute; z-index:0;//开始创建层叠上下,background-color的层叠的样式比z-inde为负数的要高一些。 } img{ position:reletion; z-index:-1; }
查看全部 -
第二点,非auto创建层叠上下文理解如下: 设置定位,box和img不创建层叠上下文,子元素覆盖父元素,且满足z-index:auto即z-index:0 设置img的z-index:-1,创建层叠上下文,此时box和img比较遵循层叠顺序规则:z-index:0优先z-index:-1,因此box在img之上 设置box的z-index:0,创建层叠上下文,此时box和img比较遵循层叠顺序规则:z-index:-1优先层叠上下文background,因此img在box之上查看全部
-
z-index只有和定位元素一起才起作用查看全部
-
box设置了display:flex;并且子元素为z-index:1;不为auto,导致box为层叠上下文元素,z-index:-1;图片就是比背景层叠高,图片就在背景上面显示。没有diplay:flex;则背景box为一般元素,图片z-index:-1;就在背景下面啦。查看全部
-
因为默认的z-index:auto并不会有层叠上下文,所以.box不设置z-index:0时,没有层叠上下文,是一个普通元素,而负值的z-index只会比有层叠上下文的background/border层级高,所以自然就没有.box层级高,所以图片在下面被覆盖啦; 而当设置了.box z-index:0时,.box就有了层叠上下文,background也就是有层叠上下文的background,因此它的层级会比z-index:-1要低,所以被图片覆盖了。不知道这样你能不能懂。查看全部
-
z-index嵌套以祖先级优先.若为默认的auto则以内部子元素为准.查看全部
-
一、层叠上下文(stacking context) 哪些元素有: 页面根元素(根层叠上下文)/z-index为数值的定位元素/其他属性 特性: 1.层叠上下文可嵌套成一个分层次的层叠上下文 2.层叠上下文与兄弟元素独立。层叠上下文变化渲染,只考虑后代元素 3.每个层叠上下文自成体系:被层叠后,元素被认为在父层层叠顺序中 二、层叠水平(stacking level) 层叠上下文中每个元素都有层叠水平,决定显示顺序 层叠水平与z-index区别: 普通元素也有层叠水平 z-index只在定位元素起作用查看全部
-
层叠水平:层叠上下文->负z-index->block块状水平盒子->float浮动盒子->inline/inline-block水平盒子->z-index:auto或者z-index:0->正z-inde 装饰<布局<内容查看全部
-
层叠顺序查看全部
-
7阶层叠水平查看全部
举报
0/150
提交
取消