简述css中z-index的作用？如何用定位使用？

z-index是一个css属性，用于控制元素的堆叠顺序，
   如何使用定位用index
1、position：relative；  z-index；
相对于自己来定位的，可以根据top，bottom，right，left，移动位置

<div style="position: relative; z-index: 2; width: 100px; height: 100px; background-color: red;">内容1
</div>
<div style="position: relative; z-index: 1; width: 100px; height: 100px; background-color: blue;">
内容2
</div>

两个元素重叠内容1比内容2大，所以在内容2上面。

内容一 会在 内容2上面显示，因为 内容一 的 z-index 为 2，而内容2的 z-index 为 1。

2、position：absolute；  z-index；
        根据最近的父级来定位的，如果父级没有定位会根据body来定位

<div style="position: relative; width: 200px; height: 200px; background-color: yellow;"><divstyle="position: absolute; top: 50px; left: 50px; z-index: 2; background-color: red; width: 50px; height: 50px;">内容1</div><divstyle="position: absolute; top: 80px; left: 80px; z-index: 1; background-color: blue; width: 50px; height: 50px;">内容2</div></div>

内容1会显示在内容2之上，因为z-index是2，内容2的z-index是1；

        3、position：fixed；  z-index；
                根据浏览器窗口来定位，不会随着页面i滚动

<div style="position: fixed; top: 0; right: 0; z-index: 10; background-color: green; padding: 10px;">内容1</div><div style="position: relative; z-index: 5; background-color: blue; padding: 10px;">内容2</div>

内容1固定到页面右侧，z-index是10，位于内容2之上。




position: sticky（粘性定位）：根据浏览器的滚动条来定位的

position: static（静态定位）：没有定位，按照html布局的位置来决定的，没有任何效果