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扫描应用漏洞时,扫描结果, ...
随机推荐
- C\C++中计时、延时函数
转载:https://blog.csdn.net/keith_bb/article/details/53055380 C\C++标准库中提供了两种计时函数clock()和time().其用法如下:(1 ...
- 指针数组学习中的小插曲真是醉了-----Strcmp用法
参考: 1.C++ 从入门到精通第三版: 2.https://blog.csdn.net/liaoshengshi/article/details/45099923 如是多次被别人转载的地址 ...
- Unicode和多字节字符集
今天自己写的发现一个输出路径程序使用unicode字符集只能输出单个的首字符,问了一下同事,改为使用多字节字符集,问题解决了 于是上网看了他们的区别: 很多没看完,但起码了解到字符集的演变过程, 转 ...
- 【题解】【HAOI2011】Problem b
\(Luogu2522\) 题目大意:求下面式子的值: \[\sum_{i=x}^n\sum_{j=y}^m[\gcd(i,j)=k] \] 这个东西直接求不好求,考虑差分,从\([1,n]\)的范围 ...
- 如何查找一个为NULL的MYSQL字段
前言:在做这个题目 https://www.cnblogs.com/pipihao/p/13786304.html 因为之前 我好像没有接触过什么 为NULL字段的查询,细节不小 WHERE 字段 I ...
- CDH5部署三部曲之二：部署和设置
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- hashCode()方法源码分析
执行代码 public class Demo06 { public static void main(String[] args) { String s="hello"; Syst ...
- day54 Pyhton 前端JS05
今日内容: 1.数组Array var colors = ['red','color','yellow']; 使用new 关键词对构造函数进行创建对象 var colors2 = new Array( ...
- Jmeter设计压力测试场景
1.哪些业务需要做压力测试? 比较常用的功能模块 单一业务场景或者多业务场景 项目需要做的业务场景 2.压力测试的并发数是多少? 有预期的数值?一次性达到?有上次性能测试的结果值? 无预期的数值?只有 ...
- <!DOCTYPE>，<address>，<applet>的用法
希望以下内容能让大家有所收获 HTML <!DOCTYPE> 标签 实例 <!DOCTYPE html> <html> <head> <title ...