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扫描应用漏洞时,扫描结果, ...
随机推荐
- plt.imshow()显示图片色差问题
转载:https://www.cnblogs.com/darkknightzh/p/6039667.html 由于系统缺少某些库,导致cv2.imshow()无法使用,于是使用matplotlib.p ...
- Linux系统编程 —共享内存之mmap
共享内存概念 共享内存是通信效率最高的IPC方式,因为进程可以直接读写内存,而无需进行数据的拷备.但是它没有自带同步机制,需要配合信号量等方式来进行同步. 共享内存被创建以后,同一块物理内存被映射到了 ...
- Jmeter JDBC Request 使用详解
本篇博文讲解以MySQL为例,搞懂JDBC Request中MySQL的使用方法,换成其它数据库, 如Oracle.PSQL也会很容易上手. 一.基本配置 1.首先我们先了解一下,不同数据库的驱动类和 ...
- Redis使用RDB持久化和AOF持久化的区别 - 小白之所见
- RHSA-2017:3075-重要: wget 安全更新（代码执行）
[root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 修复命令: 使用root账号登陆She ...
- JAVA对象头详解（含32位虚拟机与64位虚拟机）
为什么要学习Java对象头 学习Java对象头主要是为了解synchronized底层原理,synchronized锁升级过程,Java并发编程等. JAVA对象头 由于Java面向对象的思想,在JV ...
- java基础小程序—万年历
package day02.xiangmu.wannianli; import java.util.Scanner; public class CalendarTest { public static ...
- 爬虫之Selenium
简介 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作,比如 ...
- 本地环境Django配置问题
Django本地环境出现的问题 当你的前端出现这个问题的时候 你只需要吧setting.py 中的DEBUG 改为 True,即可 我原来是是DEBUG = False 本人亲测有用!!!
- sublime text2的插件
编写html代码,一定要使用emmet(前身是zencoding),还有以下插件也是可以考虑的:bracketHighter 高亮引号.括号等code Aligment 代码对齐DocBlockr 如 ...