z-index属性详解
2024-08-28 03:39:11
z-index属性详解
一.定义和用法
z-index
属性指定一个元素的堆叠顺序,也就是z轴position
属性定义的是x轴和y轴z-index
属性必须应用到position: relative|absolute|fixed
的元素上,否则属性不会生效- 应用到
float
属性的元素上也不会生效
二.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
}
.one {
background-color: gray;
/* .one进行绝对定位后, 灰色会盖住绿色 */
position: absolute;
/* 如果要绿色层级高的话,使用z-index属性大于灰色层级即可 */
z-index: -1;
}
.two {
background-color: green;
}
</style>
<title>Document</title>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
三.效果图
最新文章
- java 装饰者模式与继承的区别
- Mac OSX下卸载Nodejs
- Native SQL
- [Java] Steam文件输入流
- python学习笔记七--数据操作符
- 稀疏矩阵coo_matrix的乘法
- 寒哥教你学 iOS - 经验漫谈(转)
- codeforces 8D Two Friends 二分+ 判断三个圆是否有公共交点
- JAVA多线程suspend()、resume()和wait()、notify()的区别
- ArcGIS API for JavaScript 4.4学习笔记[新] AJS4.4和AJS3.21新特性
- Android圆形头像,拍照后“无法加载此图片”的问题解决(适配Android7.0)
- day5作业(基本数据类型字符串,列表)
- 本地Git与github连接/上传配置
- Unique constraint on single String column with GreenDao
- Java连接GBase并封装增删改查
- 【bzoj5166】[HAOI2014]遥感监测 贪心
- Spring 远程服务
- C++11 随机数
- HotSpot VM
- php 递归数据,三维数组转换二维
热门文章
- C++ 异常处理 catch(...)介绍
- C# Dropdownlist设置选择项
- 达梦数据库_DM8配置实时主备
- node将js中的json对象生成到新的excel表中
- 多测师讲解python __for 循环___高级讲师肖sir
- MeteoInfoLab脚本示例:OMI Swath HDF数据
- 机器学习:集成学习:随机森林.GBDT
- ORM查询相关的操作
- python接口测试之日志功能
- hugo主题文档-manpassant