【CSS】使用 z-index 属性值控制定位盒子的堆叠顺序 ( 多个盒子堆叠次序问题 | z-index 属性值简介 | 控制盒子堆叠次序 )
2023-06-13 09:18:38 时间
一、多个盒子堆叠次序问题
在 网页布局 中 , 如果 多个盒子都设置 绝对定位 , 那么这些盒子会堆叠在一起 ;
设置了定位样式的盒子会压住标准流盒子 , 如果有多个设置定位的盒子 , 后面的盒子会压住前面的盒子 ;
下面的代码中 , 三个盒子都设置了绝对定位 , 先设置了蓝色盒子 , 然后设置了 红色盒子 , 最后设置了 紫色盒子 ; 最终展现出来的样式是 紫色盒子 压住了 红色盒子 , 红色盒子压住了 蓝色盒子 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>堆叠次序</title>
<style>
.one,
.two,
.three {
/* 为 3 个元素 设置 绝对定位 */
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
}
.two {
/* 绝对定位 上边偏移 50 像素 */
top: 50px;
/* 绝对定位 左边偏移 50 像素 */
left: 50px;
background-color: red;
}
.three {
/* 绝对定位 上边偏移 100 像素 */
top: 100px;
/* 绝对定位 左边偏移 100 像素 */
left: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
显示效果 :
二、z-index 属性值简介
使用 z-index
属性 , 可以设置 堆叠层级 , 数值越大 , 越靠上 ;
z-index
属性取值范围 : 负整数 / 正整数 / 0 ;z-index
属性默认值为 0 ;z-index
属性值相同 , 那么按照先后顺序 , 后来的覆盖之前的 ;z-index
属性值的数字后面没有单位 ;
z-index 属性 生效的情况 :
- 相对定位
- 绝对定位
- 固定定位
在其它情况 , 如 : 静态定位 , 浮动 , 标准流 下 , z-index
属性无效 ;
三、控制盒子堆叠次序
这里设置 蓝色盒子 z-index: 3
, 红色盒子 z-index: 2
, 紫色盒子 z-index: 1
;
设置完毕后 , 蓝色盒子 压住 红色盒子 , 红色盒子 压住 紫色盒子 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>堆叠次序</title>
<style>
.one,
.two,
.three {
/* 为 3 个元素 设置 绝对定位 */
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
}
.one{
z-index: 3;
}
.two {
/* 绝对定位 上边偏移 50 像素 */
top: 50px;
/* 绝对定位 左边偏移 50 像素 */
left: 50px;
background-color: red;
z-index: 2;
}
.three {
/* 绝对定位 上边偏移 100 像素 */
top: 100px;
/* 绝对定位 左边偏移 100 像素 */
left: 100px;
background-color: purple;
z-index: 1;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
执行结果 :
相关文章
- IPv6/IPv4 + aliddns 实现黑群晖外网控制和访问
- 课设-基于51单片机的智能小车(循迹+避障+APP控制)[通俗易懂]
- Pandas数据处理1、DataFrame删除NaN空值(dropna各种属性值控制超全)
- 路由控制、引入、策略
- 【Python】字符串 ⑤ ( Python 字符串快速格式化 | 不考虑变量类型 | 不考虑精度控制 )
- JS控制文本框只能输入数字和小数点详解编程语言
- Linux文件大小管理:利用fsize控制文件大小(linuxfsize)
- 控制・Oracle 并发控制:实现安全、稳定业务(oracle并发)
- 时间使用Redis控制Java数据过期时间(redisjava过期)
- 掌握MySQL语句,控制数据库表单(mysql控制语句)
- SQL Server之闩锁:实现多锁定的并发控制(sqlserver 闩锁)
- Linux命令控制显示光标(linux 显示光标)
- Oracle凭证管理有效实现企业财务控制(oracle凭证管理)
- Oracle精准控制小数位数(oracle 几位小数)
- MySQL中if流程控制简介(MySQL中if流程控制)
- Redis实现流量控制计数器的优点(Redis限流计数器)
- 脚本控制自适应高度的缩短问题
- jQuery控制图片的hover效果(smartRollover.js)
- javascript控制Div层透明属性由浅变深由深变浅逐渐显示
- jquery控制display属性为none或block
- JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
- jquery控制select的text/value值为选中状态