定位的盒子叠放顺序z-index
2024-10-21 07:27:28
1.正常情况，按照顺序，最后的盒子在最上面，默认z-index为0
2.当使用z-index，数字越大，越优先显示在上面
3.注意，只要定位的盒子才可以使用该方法
<body>
<div class="box1">注意，只要定位的盒子才可以使用该方法</div>
<div class="box2">当使用z-index，数字越大，越优先显示在上面</div>
<div class="box3">正常情况，按照顺序，最后的盒子在最上面，默认z-index为0</div>
</body>
<style>
.box1 {
width: 300px;
height: 300px;
background: rgb(215, 230, 14);
position: absolute;
}
.box2 {
width: 300px;
height: 300px;
background: rgb(219, 12, 12);
position: absolute;
left: 100px;
top: 100px;
z-index:;
}
.box3 {
width: 300px;
height: 300px;
background: rgb(110, 12, 223);
position: absolute;
left: 200px;
top: 200px;
}
</style>
最新文章
- [LintCode] Best Time to Buy and Sell Stock II 买股票的最佳时间之二
- react 调用 native 的callShareAllFunc()方法，实现分享
- java多线程系类：基础篇：08之join
- String 与 byte[]相互转换
- 使用HttpClient抓取网站首页
- IE11下ASP.NET Forms身份认证无法保存Cookie的问题
- Oracle数据库安装完成之后的启动操作
- CSS3最简洁的轮播图
- linux下启动某个进程
- Service Trace Viewer Tool (SvcTraceViewer.exe)
- traceroute原理
- IC卡、M1卡、CPU卡、SAM卡、PSAM卡的联系与区别
- win10常用的运行命令
- java利用接口和适配器进行完全解耦--参考《thinking in java》
- CentOS6.9-zabbix3.2启动失败原因及页面没有mysql选择项
- [经验交流] kubernetes v1.11 更新了高可用方案
- RoboMongo命令（版本：Robo 3T 1.1.1）
- Flutter环境搭建
- PHP中封装Redis购物车功能
- JavaScript-手机中访问页面判断