CSS（三）：CSS层级详解

层级问题  （谁高）
总结：
标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。

定位高于浮动，浮动高于标准流。（高低和占不占位置无关）（除去static之外）。

z-index的用法：
      1、必须有定位。（除去static之外）。

      2、给定z-index的值为层级的值。（不给默认为0）

    （层级为0的盒子，也比标准流和浮动高。）

    （层级为负数的盒子，比标准流和浮动低。）

    （层级不取小数）

    （层级一样，后面的盒子比前面的层级高。）

    （浮动或者标准流的盒子，后面的盒子比前面的层级高。）

定位中：abselute是不占位置的，relative是占位的。而层级的高低，是和占不占位置没有关系的

 

1. 形成堆叠上下文环境的元素的背景与边框

2. 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）

3. 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素

4. 无 position 定位（static除外）的 float 浮动元素

5. 正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）

6. 拥有 z-index:0 的子堆叠上下文元素

7. 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

参考网址：https://www.cnblogs.com/coco1s/p/5899089.html