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扫描应用漏洞时,扫描结果, ...
随机推荐
- matlab中fix, floor, ceil, round 函数的使用方法
转载: https://www.ilovematlab.cn/thread-91895-1-1.html Matlab取整函数有: fix, floor, ceil, round.具体应用方法如下: ...
- matlab中fseek 移至文件中的指定位置
文章来源:https://ww2.mathworks.cn/help/matlab/ref/fseek.html?searchHighlight=fseek&s_tid=doc_srchtit ...
- puts()和gets()函数
puts()和gets()函数 1. puts()函数 puts()函数用来向标准输出设备(屏幕)写字符串并换行, 其调用格式为: puts(s); 其中s为字符串变量(字符串数组名或字符串指针). ...
- 【学习笔记/题解】分层图/[JLOI2011]飞行路线
题目戳我 \(\text{Solution:}\) 关于分层图: 一般用于处理:给你\(k\)次机会对边权进行修改的最短路问题. 算法流程: 建立出\(k\)层图,对应进行\(k\)次操作后的局面. ...
- ubuntu20 make redis6
redis 官网:https://redis.io redis 下载和编译位置: cd /opt 下载 redis: wget http://download.redis.io/releases/re ...
- 宜宾1178.9873(薇)xiaojie:宜宾哪里有xiaomei
宜宾哪里有小姐服务大保健[微信:1178.9873倩儿小妹[宜宾叫小姐服务√o服务微信:1178.9873倩儿小妹[宜宾叫小姐服务][十微信:1178.9873倩儿小妹][宜宾叫小姐包夜服务][十微信 ...
- elasticsearch练习
elasticsearch练习 最近在学习elasticsearch,做了一些练习,分享下练习成果,es基于6.7.2,用kibana处理DSL,有兴趣的伙伴可以自己试试 1.简单查询练习 sourc ...
- CentOS 7基础命令介绍
01 CentOS基础命令介绍 重所周知,Linux是一个主要通过命令行来进行管理的操作系统,即通过键盘输入指令来管理系统的相关操作,包括但不限于编辑文件.启动/停止服务等.这和初学者曾经使用的Win ...
- JVM内存管理和垃圾回收
无论对于Java程序员还是大数据研发人员,JVM是必须掌握的技能之一.既是面试中经常问的问题,也是在实际业务中对程序进行调优.排查类似于内存溢出.栈溢出.内存泄漏等问题的关键.笔者将按下图分多篇文章详 ...
- Vue基础语法（四）
vue的生命周期钩子函数 所有的生命周期钩子自动绑定this到上下文实例中,因此可以访问数据对property和方法进行运算,这意味着不蹦使用箭头函数来定义一个生命周期方法.参考官方文档,生命周期图 ...