首页 > 代码库 > [HTML/CSS]z-Index层重叠顺序
[HTML/CSS]z-Index层重叠顺序
目录
语法结构
如何使用?
使用案例
总结
语法结构
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后的值越大,越靠近屏幕。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。