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扫描应用漏洞时,扫描结果, ...
随机推荐
- Linux 百度网盘卡在等待页
解决办法1 如果无法登录百度网盘,一直在加载,运行命令:rm -rf ~/baidunetdisk 然后关闭百度客户端,重新登录百度客户端. 解决办法2 如果已经登录进百度网盘,退出百度网盘时,不要直 ...
- 解决mybatis-plus更新数据的时候，有值为空导致更新失败的问题
问题 在用mybatis-plus更新数据的时候,更新失败,错误信息如下: Cause: org.apache.ibatis.type.TypeException: Could not set par ...
- 跟我一起学.NetCore之熟悉的接口权限验证不能少(Jwt)
前言 权限管控对于一个系统来说是非常重要的,最熟悉不过的是菜单权限和数据权限,上一节通过Jwt实现了认证,接下来用它实现接口权限的验证,为什么不是菜单权限呢?对于前后端分离而言,称其为接口权限感觉比较 ...
- 下载 node.js 步骤 bower npm 报错解决
1,下载node.js ,安装之后就可以 了 2,解决"npm不是内部或外部命令" ,打开安装的node.js 的文件夹 将这个地址,放在环境变量里面 <1,属性环境 ...
- C# 用IrisSkin4.dll美化你的WinForm
如果需要查看更多文章,请微信搜索公众号 csharp编程大全,需要进C#交流群群请加微信z438679770,备注进群, 我邀请你进群! ! ! --------------------------- ...
- C# 生成chart图表的三种方式
．net中,微软给我们提供了画图类(system.drawing.imaging),在该类中画图的基本功能都有.比如:直线.折线.矩形.多边形.椭圆形.扇形.曲线等等,因此一般的图形都可以直接通过代码 ...
- Oracle报错>记录被另外一个用户锁定
原因 当一个用户对数据进行修改时,若没有进行提交或者回滚,Oracle不允许其他用户修改该条数据,在这种情况下修改,就会出现:"记录被另外一个用户锁定"错误. 解决 查询用户.数据 ...
- Eclipse4.5 Mars版本安装activiti插件 亲测可用
Eclipse4.5 Mars版本安装activiti插件 亲测可用 学习使用activiti 在线安装一直,国内的网络真心的是 很苦 啊:在茫茫网络上面找到了很多插件的离线包 终于找到一个可以使用的 ...
- Prometheus 入门教程（一）：Prometheus 快速入门
文章首发于[陈树义]公众号,点击跳转到原文:https://mp.weixin.qq.com/s/ZXlBPHGcWeYh2hjBzacc3A Prometheus 是任何一个高级工程师必须要掌握的技 ...
- 协同开发功能——Github团队协作
最近需要写一个HoloLens开发的简明介绍,其中要测试几个demo.用到github以团队协作,像下面是简单的事件记录. 一.创建项目 1. 2.项目设置 名称 描述description Init ...