(4.9)--3.9堆叠层级.pdf

《(4.9)--3.9堆叠层级.pdf》由会员分享，可在线阅读，更多相关《(4.9)--3.9堆叠层级.pdf（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、3.9堆叠层级Z 轴xyzz-index为定位元素指定其在 z 轴的上下层级个整数表，数值越，越靠近户初始值为 auto，可以为负数、0、正数个履历简介Box a?divBox b?divBox c?div div position:absolute;width:200px;line?height:200px;text?align:center;color:#fff;.box?a background:#F44336;.box?b top:100px;left:100px;z?index:-1;background:#0097A7;.box?c top:150px;Box bBox aBox

2、chttps:/s.codepen.io/webzhao/debug/ebmxbK/dXkqBZPmJ a?div?div b?div?div .box?a position:absolute;z?index:1;width:200px;line?height:200px;text?align:center;background:#F44336;.box?b position:absolute;top:100px;left:100px;width:200px;bahttps:/s.codepen.io/webzhao/debug/aPzgMv/VJkxxVXdyDDk堆叠上下 Stacking

3、 ContextStacking Context A123Stacking Context A-0123Stacking Context B-101C-2Root Stacking Context堆叠上下的创建Root 元素z-index 值不为 auto 的 relative/absoluteposition 是 fixed 的元素设置了某些属性的元素opacity 不为1transformanimation a?div?div b?div?div .box?a position:absolute;z?index:1;width:200px;line?height:200px;text?align:center;background:#F44336;.box?b position:absolute;top:100px;left:100px;width:200px;bahttps:/s.codepen.io/webzhao/debug/aPzgMv/VJkxxVXdyDDk绘制顺序在每个堆叠上下中，从下到上：形成该上下的元素的 border 和 backgroundz-index 为负值的堆叠上下常规流内的块级元素浮动元素常规流内级元素z-index 为 0 的元素或堆叠上下z-index 为正数的堆叠上下