其他分享
首页 > 其他分享> > 3：z-index

3：z-index

作者：互联网

<!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>

 

标签：index,顺序,层叠,元素,let,上下文
来源： https://www.cnblogs.com/pengxiangchong/p/16189599.html