iv cssz-index层重叠顺序

div层、span层等html标签层重叠顺序样式z-index，平时CSS使用较少，但也会难免会碰到CSS z-index使用。

从基础语法到应用案例教程讲解学习z-index。

一、z-index语法与结构

z-index 跟具体数字

div{
  z-index:100
}

注意：z-index的数值不跟单位。

z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）。

二、z-index使用条件

z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常CSS让不同的对象盒子以不同顺序重叠排列，CSS就是要z-index样式属性。

三、案例

1. z-index重叠顺序案例

为了方便观察，设置3个DIV盒子，分别设置不同css背景颜色，设置相同CSS高度、CSS宽度。分别设置背景颜色)为黑色、红色、蓝色。CSS width为300px，css height为100px。

css代码（没加z-index属性）

<style>
            .div css5 {
                position: relative;
            }


            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 300px;
                height: 100px;
                position: absolute;
            }


                .divcss5-1 {


                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }


            .divcss5-2 {


                background: #F00;/* 红色*/
                left: 20px;
                top: 20px
            }


            .divcss5-3 {


                background: #00F;/* 蓝色*/
                left: 30px;
                top: 30px
            }
</style>

CSS代码(加上z-index属性后) :

<style>
            .div css5 {
                position: relative;
            }


            .div css5-1,
            .div css5-2,
            .div css5-3 {
                width: 200px;
                height: 100px;
                position: absolute;
            }


            .div css5-1 {
                z-index: 10;
                background: #000;/* 黑色*/
                left: 10px;
                top: 10px
            }


            .div css5-2 {
                z-index: 20;
                background: #F00;/* 红色*/
                left: 20px;
                top: 20px
            }


            .div css5-3 {
                z-index: 15;
              background: #00F;/* 蓝色*/
                left: 30px;
                top: 30px
            }
</style>

html代码

 <div class="divcss5-1"></div>
 <div class="divcss5-2"></div>
 <div class="divcss5-3"></div>

没加的效果:

加上z-index属性效果：

2. 案例说明

三个盒子均都使用了绝对定位属性position样式，并且设置相同的高度和宽度样式。为了便于观察CSS使用left、right属性并赋予不同值，让其错落有致。

• Div css5-1 盒子背景为黑色， z-index:10
• Div css5-2 盒子背景为红色， z-index:20
• Divcss5-3盒子背景为蓝色 ， z-index:15

为可以看见第一个盒子z-index:10，所以重叠在最下层，而第二个盒子z-index:20，值最大所以最上层重叠，第三个盒子设置z-index:15，居中。

四、总结

本文基于CSS基础，介绍了如何使用z-index重叠顺序样式，在实际DIV+CSS布局时候CSS需要绝对定位样式，并且可以使用left、right进行定位，通过不同z-index值实现层重叠顺序排列。代码很简单，希望能够帮助你学习。

个视频我们来写两个圆环。这个圆环虽然看起来只是普普通通的两个圆，但是认真一看好像又没那么简单，因为它是交错重叠起来的，并且还有一点阴影的效果，看起来比较真实。这个案例其实是UTube上面一个比较知名博主的教学案例，我们不妨来学习一下。

可能很多人也看过，我们今天主要来实现这两个圆环重叠的部分，阴影的部分比较简单，大家可以自己去思考一下。html里面这两个div就是这两个圆环，样式现在写了一些基本的样式，其它样式重新来写。

·先来把这两个圆环的基础样式写出来，两个圆有了，然后把其中一个变成红色，再让它们先简单的重叠一下，控制一下第二个圆环，调整一下它的边框颜色就可以了，把它变成红色。

·再往左边移动60像素，先简单重叠起来。现在两个圆只是简单的重叠，我们要怎么样实现这种交错重叠？就好像两个圆环是穿起来的这种感觉。这里分别给这两个圆环加个伪元素，我们是可以通过定位把一个盒子撑起来的。

·这里给它设置一下inset，关键就是inset设置为多少合适。如果是设置为0，也就是四个方向都是设为0，按道理应该是和父元素完全重叠的(没border的话)。

·加个边框看一下，很明显它并没有和白色圆环完全重叠，而是在它里面。这是因为我们看到的这两个圆环，看到的只是border边框的区域。inset的设置为0，它只不过是贴在content内容区域里面，所以伪元素我们要把它扩大才可以。

·这里要调整一下inset的值，0是刚好贴满content的区域，设置为正值它是收缩的，所以这里设置为-25px。现在和白色的圆环就一样大了，只不过一个正方形一个圆形，等一下把伪元素调整成圆的就可以了。

·然后单独来设置一下上边框，同样也是白色的边框，还有右边框也单独设置一下。ok，再把另外两条边框设置为透明。现在左边和下边就看不到了，再把它设置成一个圆，这样它就可以和第一个圆环完全重叠起来了。

·现在伪元素这半个圆环就和本来的圆环完全重叠起来，那有什么用？还是和原来的一样，但是现在就可以单独给伪元素这半个圆环设置层级了，把层级调高一点，这样这一段圆环它就可以盖在上面，然后再给它旋转一下位置，让它旋转负的四十五度，这样两个圆环贯穿重叠起来的效果就完成了。

其实就是借助了一个伪元素做了一个障眼法，如果想实现圆环交汇的地方有点阴影的效果，也可以多写两个伪元素来实现，这个大家可以自己来思考一下。

这个视频就到这里，感谢大家的收看。

chart 多图同一Div 渲染重叠的问题，实验下来，最有效的一个方法就是这个，在初始化之前，加一句 removeAttr。。, 其他方法如.clear, .dispose， .setOption({},true) 均失败。。。