堆叠顺序的误区和z-index

Z-index

        在咱们经常使用的css中z-index 属性是设置节点的堆叠顺序, 这是咱们对 z-index 属性广泛的认识. 与此同时, 咱们老是对堆叠顺序的概念模糊不清，这样将会致使咱们在平时的布局中出现一些问题。下面我我的对css中z-index的一些我的的认识，但愿能帮到你们，有说错的地方但愿你们指正。  

        css布局中咱们经常会使用一些float:laft;和float:right;以及定位中的absolute,relative,fixed;

有的人误认为定位和定位之间是自己就存在附带堆叠顺序的,在本身通过测试以后发现,他们的默认是没有堆叠顺序的,只是在html中标签的先后顺序致使的而使你们误认为是定位和定位之间的堆叠顺序而致使的。

        

---

        下面是正常使用z-index代码示例：

        定位中的static是标准流，因此这里不作讲解

        当咱们有三个盒子

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>

        咱们给他们分别设置fixed，relative，absolute；背景色为红色，蓝色，绿色

        咱们会发现absolute的绿色盒子会在最上面，在html代码中更改标签的位置顺序则可让盒子出如今堆叠层的最上面，固然若是咱们要想在不改变html标签的顺序，那么咱们就可使用第二种方法z-index：

        在咱们添加z-index是要注意这个样式是有值的；值也能够影响咱们的堆叠顺序。

        样式内z-index的值越大的堆叠层越高，固然咱们也要注意z-index也并非在何时都管用的。

        只有在同同样式时，好比定位与定位之间的堆叠，浮动与浮动之间的堆叠，若是有两个盒子，一个盒子为浮动元素一个盒子为定位元素，两个盒子发生堆叠，此时咱们想要浮动的盒子显示在定位盒子之上，咱们是没有办法的，设置z-index这个时候是没有用的。

        定位的盒子自己堆叠的顺序就要比浮动的盒子的堆叠顺序要高，因此此时咱们要解决这个问题就须要把浮动盒子换成定位的盒子，设置以后咱们就能够z-index来设置堆叠顺序了。

        上面是本人的一点我的观点，但愿能够帮到你们，后续本身也会写一些关于web中一些我的认识。有不一样观点你们能够随意发表。