层叠水平

更方便页面元素的加载和呈现
7阶层叠水平图
意义:规范元素重叠时候的呈现规则。
为何:更符合页面加载和视觉呈现
七阶层叠水平
著名的7阶层叠水平
文字是内联水平
7阶层叠水平层叠顺序:
层叠上下文的background/dorder < 负z-index < block块状水平盒子< float浮动盒子 < inline/inline-block水平盒子 < z-index:auto或看成z-index:0 < 正z-index
网页元素的重要性和顺序
7阶层叠水平
背景色覆盖是层叠顺序,文字覆盖是后来居上。
7阶层叠水平
为什么会是这样的层叠顺序?
7阶层叠水平
内容是页面最重要的实体,因此,层叠水平要搞
元素的层叠顺序:
层叠顺序表示元素发生层叠时的特定的垂直显示顺序


7阶层叠水平
7阶层叠水平
土黄色背景是linline-block的,绿色是block的,因为linline-block层级比block高,所以土黄色在绿色的上面,但土黄色层级比inline低,所以绿色上的文字可以再土黄色背景上。
翻译: 因inline-block官职比block高, 同为背景色的家仆,土黄色就比绿色的高,但家仆不是当官,所以block在上面
css的简单层叠顺序:
background-color+border
z-index负
block
float
inline/inline-block
z-index:auto或者0
z-index正
晕啦,哈哈哈
7阶层叠水平的排序缘由:

7阶层叠水平,看了这张图后,又推翻了我前边的理解。。
。。。。。
层叠顺序!
7阶层层叠作用
元素的层叠顺序(stacking order)
7阶层层叠水平
哇哦
层叠水平:层叠上下文->负z-index->block块状水平盒子->float浮动盒子->inline/inline-block水平盒子->z-index:auto或者z-index:0->正z-inde 装饰<布局<内容