z-index属性详解
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>
三.效果图
z-index属性详解的更多相关文章
- 【CSS3 transform属性和过渡属性详解】
CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...
- Angular 6.X CLI(Angular.json) 属性详解
Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在an ...
- jQuery Event.which 属性详解
jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对 ...
- MWPhotoBrowser 属性详解 和代理解释
--------0.MWPhoto简单属性解释---------------- MWPhoto *photo = [MWPhoto photoWithURL:[NSURL URLWithString: ...
- Flash播放控件属性详解
Flash 播放控件属性详解 一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...
- Ext.tree.TreePanel 属性详解
Ext.tree.TreePanel 属性详解 2013-06-09 11:02:47| 分类: ExtJs|举报|字号 订阅 原文地址:http://blog.163.com/zzf_fly/b ...
- css 14-CSS3属性详解：Web字体
14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...
- css 12-CSS3属性详解：动画详解
12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...
- android:exported 属性详解
属性详解 标签: android 2015-06-11 17:47 27940人阅读 评论(7) 收藏 举报 分类: Android(95) 项目点滴(25) 昨天在用360扫描应用漏洞时,扫描结果, ...
随机推荐
- E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)
Linux下sudo apt-get install 安装时报错: 解决办法 1. 终端输入 ps -aux ,列出进程.找到含有apt'-get或者wget的进程, 直接sudo k ...
- VS2015中无法查找或打开 PDB 文件
装载:https://blog.csdn.net/aalonso/article/details/90672072 MFCApplication1.exe"(Win32): 已加载" ...
- Python+Appium自动化测试(2)-appium连接真机启动app
app自动化测试的第一步,是启动被测app.appium环境搭建好后,我们就可以连接真机启动app了.环境为windows,Appium1.18.0,Android手机,被测app为今日头条app,让 ...
- 一文读懂MySQL的事务隔离级别及MVCC机制
回顾前文: 一文学会MySQL的explain工具 一文读懂MySQL的索引结构及查询优化 (同时再次强调,这几篇关于MySQL的探究都是基于5.7版本,相关总结与结论不一定适用于其他版本) 就软件开 ...
- 第七章 TCP和UDP原理
一.引入 1.TCP/IP协议族的传输层协议主要包括TCP和UDP 2.TCP是面向连接的可靠的传输层协议.它支持在并不可靠的网络上实现面向连接的可靠的数据传输 3.UDP是无连接的传输协议,主要用于 ...
- PHPStorm注释缩进问题
以下是让强迫症很难受的注释格式 以下几步即可解决强迫症的烦恼 1.点击File 2.点击setting 3.按照以下几步走 4.按照以下几步走 5.最后效果如下
- 解谜：为何用了9-Patch背景图后自带Padding属性？
本次分享的主题源于笔者在实际开发中遇到的问题. 具体现象为:当普通的9-Patch图用作TextView的backGround属性后,整个TextView便有了一定的Padding值.但笔者并没有给定 ...
- echarts常用功能封装|抽象为mixin
目前已解锁以下功能: [x] 初始化echarts(initChart) [x] 获取echarts参数配置(getOption) [x] 生成echarts图表(setOption) [x] 监听r ...
- 微服务nacos服务注册与发现
一,以上一篇为基础 微服务从nacos配置中心获得配置信息 给service1, service2添加依赖 <dependency> <groupId>com.alibaba. ...
- 学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳
学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 10 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第三篇) 入门详解 - 精简归纳 ...