<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>z-index</title>
</head>
<body>
<script>
let a = `要想理解 z-index ，必须先了解三个概念，分别是层叠上下文、层叠等级、层叠顺序`;
let b = `层叠上下文是html中的一个三维概念，在css2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的x轴和y轴，以及表示层叠的z轴；一般情况下，元素在x轴y轴平铺，察觉不到在z轴的层叠关系
如果一个元素含有层叠上下文，可以理解在z轴上高人一等，最终表现是离屏幕观察者更近`;
let c = `层叠等级：描述的是在同一层叠上下文中，层叠上下文元素在z轴的上下顺序。如果没有层叠上下文，则描述普通元素在z轴的上下顺序。不同层叠上下文的元素无法比较；`;
let d = `如何产生层叠上下文`;
let e = `html的根元素本身就有层叠上下文，称为根层叠上下文；普通元素设置position属性为非static值并设置z-index属性为具体值时，产生层叠上下文；css3新属性也会产生层叠上下文`;
let f = `层叠顺序：表示元素发生层叠时按照特定的顺序规则在z轴上的垂直显示。`;
let g = `层叠上下文的background/border 《 z-index<0 《 block块级盒子 《 float浮动盒子 《 inline/inline-block 水平盒子 《 z-index:0/z-index:auto 《 z-index:>0`;
let h = `先大后小，先判断层叠上下文，后判断是否普通元素，后层叠等级，按照层叠规则比较`;
</script>
<script>
let link = `https://blog.csdn.net/chern1992/article/details/107073184/`;
</script>
</body>
</html>
