[HTML/CSS]z-Index层重叠顺序
浏览数：31 /
时间：2015年06月09日
目录
语法结构
z-index：具体数字。如：div｛z-index：100｝，注意，后面跟的数字并不带单位。主要应用在div，span等标签的层叠处理。
如何使用？
z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列，就需要z-index样式进行设置了。
使用案例
为了便于理解，我们这里用三个不同颜色的div进行对比学习。
css代码：
1 /*z-index 测试用样式*/ 2 .div {position:relative;} 3 .div1,.div2,.div3 {width:100px;height:50px;position:absolute;} 4 .div1{z-index:10;background:red;left:10px;top:10px;} 5 .div2 {z-index:20;background:blue;left:20px;top:20px;} 6 .div3 {z-index:30;background:yellow;left:30px;top:30px;}
html代码：
1 <div class="div1"></div> 2 <div class="div2"></div> 3 <div class="div3"></div>
结果：
三个div都使用了绝对定位position:absolute样式，并设置了相同的宽高，为了便于观察，使用了left，top样式将他们的位置错开。
可见：
红色的div的位于最下面：z-index：10；
蓝色的div位于中间：z-index：20；
黄色的div位于最上面：z-index:30；
总结
在使用z-index进行层叠时，需和position:absolute样式一起使用，z-index后跟的数字可以为负数。z-index后的值越大，越靠近屏幕。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
