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 ...
最新文章
- git push 时不用每次都输入密码的方法
- 我的世界java测试版下载_我的世界中国版PC不删档测试版_网易我的世界JAVA版测试版单机游戏下载...
- STM32高级开发(12)-在GCC中使用printf打印串口数据
- linux注册函数机制,Linux可信计算机制模块详细分析之函数实现机制(1)字符设备驱动...
- python代码生成可执行程序_Python—脚本程序生成exe可执行程序(pyinstaller)
- 开发板实现645协议C语言,迅为-imx6ull开发板之C语言实现LED例程
- 判断单链表中的元素是否递增_检测单链表中是否有环(C语言)
- 云技术-SaaS架构初步理解
- js怎么图表在html中显示,使用Charts.js在HTML5中创建图表
- 【英语学习】【Level 07】U06 First Time L4 Lost in Shanghai
- Postfix配置QA
- oracle怎么恢复删除数据库数据库文件,Oracle只有数据文件恢复数据库
- 干货 | 彻底理解ANDROID BINDER通信架构(下)
- go语言 读文件最后一行_Go 语言核心文件调试
- GameCenter Achievement相关问题
- 对数正态分布(Log-Normal Distribution)
- guzzle php,windows系统下安装使用guzzle
- 丈夫三次“买凶杀妻” 妻子毫无所觉称婚姻甜蜜
- truffle unbox react 初始化踩坑
- Linux下代理服务器(proxy)配置