z-index为负值的最终表现并不一致,它与“层叠上下文”和“层叠顺序”密切相关 层叠上下文和层叠顺序:(下图是来自参考张鑫旭大神的7阶层叠顺序图) 在上图中我们也可以看出z-index负值元素的层级是在层叠上下文元素上面、block元素的下面,也就是说z-index虽然名为负数层级,但依然无法突破当前层叠上下文所包裹的小世界 ...
z-index可以使用负值 z-index经常被赋正值,但它其实可以为负值的,ie和ff都兼容。写特殊效果时可以试试。 === <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 阿当制作 .head{height:200px;background:#000;margin-left:50px;} .layer{wid...
这里一定要结合前面那张七阶图,最下面那一层background便是是建立在层叠上下文的基础上的,也就是说在层叠上下文中,所有的元素都会渲染在该元素的层叠上下文背景和边框上面;在block盒子、float盒子等不存在层级上下文的元素中,子元素设置z-index为负值的时候,那么子元素会被父元素遮挡。说了可能不太好理解,举个栗子消...
z-index负值的层叠顺序在层叠上下文元素背景色之上(如图3) 从层叠顺序上讲,z-index:auto 可以看成z-index:0; 但是从层叠上下文来讲,两者却有着本质差异。 但是在IE7之下有bug,z-index:auto 也会创建层叠上下文。 3>z-index层叠顺序的比较止步于父级层叠上下文; ...
z-index为0时依然处于堆叠上下文中,比负值高,比正值低。 z-index为负值时不仅会处于z-index为0和正值元素的后面,还会处于非堆叠元素的后面。
z-index负值可以隐藏元素,只需要层叠上下文内的某一个父元素加个背景色就可以。它与clip隐藏想必的一个优势是:元素无须绝对定位,设置position:relative就可以隐藏,另一个优势是它对原来的布局以及元素的行为没有任何影响。而clip隐藏会导致空间focus的焦点发生细微的变化,在特定条件下是有体验问题的。它的不足之处就...
z-index允许负值,所以这里即便z-index: 2在3的后面,仍然会堆叠在其上面。 所以,z-index主要用于控制定位元素的前后堆叠顺序,它在 responsive 布局和凸显重要元素方面都有很好的应用。但在使用时需要注意它只对定位元素有效,且值较大不一定能达到想要的堆叠效果,还需要考虑DOM顺序等因素。
最近做背投广告,因为默认页面没有设置z-index,发现如果将z-index为负值的元素无法点击到,那么解决方案就是将背投广告z-index设置为1,其它元素z-index增加。 假设有这样一个需求: eader和主区域是原来就有的,现在要在页面中加一个背景图,要求该背景图层在主区域之下,但在主区域之外的部分可点击,是一个链接。
上面父级无定位z-index设置,自然不会创建层叠上下文,此时层叠上下文为根层叠上下文html,则button是以为层叠上下文根元素html来进行覆盖,由于label为inline元素,button层级为z-index负值,根据层叠顺序我们可以明白button在body上面,而label位于button之上。