css z-index层重叠顺序
一、z-index语法与结构
z-index 跟具体数字
如:
div{z-index:100}
注意:z-index的数值不跟单位。
z-index的数字越高越靠前,并且值必须为整数和正数(正数的整数)。
二、z-index使用条件
Z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列,我们就是要z-index样式属性。
三、z-index应用案例
为了方便观察z-index样式属性,我们设置3个DIV盒子,分别设置不同css背景颜色,设置相同CSS高度、CSS宽度。分别设置背景颜色为黑色、红色、蓝色。CSS width为100px,css height为50px
.css代码
.divcss5{position:relative;}
.divcss5-1,.divcss5-2,.divcss5-3
{width:100px;height:50px;position:absolute;}
.divcss5-1{z-index:10;background:#000;left:10px;top:10px}
.divcss5-2{z-index:20;background:#F00;left:20px;top:20px}
.divcss5-3{z-index:15;background:#00F;left:30px;top:30px}
.html代码
<div class="divcss5-1"></div>
<div class="divcss5-2"></div>
<div class="divcss5-3"></div>
.案例截图
案例说明:
三个盒子均都使用了绝对定位属性position:absolute样式,并且设置相同的高度和宽度样式。为了便于观察我们使用left、right属性并赋予不同值,让其错落有致。
Divcss5-1盒子背景为黑色,z-index:10
Divcss5-2盒子背景为红色,z-index:20
Divcss5-3盒子背景为蓝色,z-index:15
为可以看见第一个盒子z-index:10,所以重叠在最下层,而第二个盒子z-index:20,值最大所以最上层重叠,第三个盒子设置z-index:15,居中。
四、z-index总结
我们使用z-index重叠顺序样式,在实际DIV+CSS布局时候我们需要绝对定位样式,并且可以使用left、right进行定位,通过不同z-index值实现层重叠顺序排列。
注:本文转载自http://www.divcss5.com/rumen/r402.shtml
转载于:https://www.cnblogs.com/lc23/p/6032589.html
css z-index层重叠顺序相关推荐
- CSS z-index属性层重叠顺序
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址
- css叠层_css z-index层重叠顺序
div css z-index层重叠顺序 DIV层.span层等html标签层重叠顺序样式z-index,平时我们使用较少,但也会难免会碰到CSSz-index使用.接下来divcss5介绍z-ind ...
- html层重叠,HTML/CSS相关问题 z-Index层重叠顺序
语法结构 z-index:具体数字.如:div{z-index:100},注意,后面跟的数字并不带单位.主要应用在div,span等标签的层叠处理. 如何使用? z-index在使用绝对定位 posi ...
- CSS 七层叠层顺序(stacking level)
CSS 七层叠层顺序(stacking level)
- CSS中属性的书写顺序
传说中的Mozilla推荐 /* mozilla.org Base Styles* maintained by fantasai*/ /* Suggested order:* display* lis ...
- CSS外边距(margin)重叠及防止方法
#css外边距margin重叠及防止方法CSS外边距(margin)重叠及防止方法 #1-什么是外边距margin重叠1. 什么是外边距(margin)重叠 外边距重叠是指两个或多个盒子(可能相邻也可 ...
- css样式 浏览器的读取顺序
css样式 浏览器的读取顺序 例: tbody tr td{} 浏览器是先查找td,然后去找td tr,然后去找td tr tbody div p{}和div>p{}的区别 .div p{} 是 ...
- css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
- 编写SQL语句,从Customers中检索所有的顾客名称(cust_name),并按从Z到A的顺序显示结果
问题: 编写SQL语句,从Customers中检索所有的顾客名称(cust_name),并按从Z到A的顺序显示结果. 答案: SELECT cust_name /* 检索所有的顾客名称(cust_na ...
最新文章
- 高并发软件设计的几种方式
- 如何計算SDRAM使用頻寬?
- java sort reverse_Java ArrayList sort() 方法
- 如何在Java 8中创建线程安全的ConcurrentHashSet?
- ASP.NET 网站项目 EF 的简单操作例子
- C#数据结构-稀疏矩阵
- Hyper-v 虚拟机使用NAT方式连接网络
- C#算法 质因数 最大公约数与最小公倍数
- Mac自带的实用功能
- PHP获取数组中重复值的键值
- android画板笔锋实现
- 计算机毕业设计springboot微信小程序购物商城源码
- 全球股市一泻千里,专家认为A股有坚挺基础
- 规划控制下的二阶段设计理论 -【多核服务价值链协同】
- win7虚拟机安装VMware tools失败
- docker 20.10.9 dockerd containerd containerd-shim-runc-v2 runc 组件分析
- Android解析XML的三种方式
- 一次qps测试实践(续)
- 计算机维护维修论文摘要,计算机维护论文摘要怎么写 计算机维护论文摘要范文参考...
- 前后端文件流MD5加密