html层重叠,HTML/CSS相关问题 z-Index层重叠顺序

语法结构

z-index：具体数字。如：div｛z-index：100｝，注意，后面跟的数字并不带单位。主要应用在div，span等标签的层叠处理。

如何使用？

z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列，就需要z-index样式进行设置了。

使用案例

为了便于理解，我们这里用三个不同颜色的div进行对比学习。

css代码：1 /*z-index 测试用样式*/

2 .div {position:relative;}

3 .div1,.div2,.div3 {width:100px;height:50px;position:absolute;}

4 .div1{z-index:10;background:red;left:10px;top:10px;}

5 .div2 {z-index:20;background:blue;left:20px;top:20px;}

6 .div3 {z-index:30;background:yellow;left:30px;top:30px;}

html代码：1

结果：

三个div都使用了绝对定位position:absolute样式，并设置了相同的宽高，为了便于观察，使用了left，top样式将他们的位置错开。

可见：

红色的div的位于最下面：z-index：10；

蓝色的div位于中间：z-index：20；

黄色的div位于最上面：z-index:30；

总结

在使用z-index进行层叠时，需和position:absolute样式一起使用，z-index后跟的数字可以为负数。z-index后的值越大，越靠近屏幕。

html层重叠,HTML/CSS相关问题 z-Index层重叠顺序相关推荐

CSS相关知识点：6种清除浮动和BFC
文章目录 CSS相关知识点:6种清除浮动和BFC 一.6种清除浮动 1.场景 2.原因 3.清除浮动 (1).给父级设置对应的高度 (2).给父级增加定位absolute (3).将父级也设计成浮动 ...
【前端领域高频笔试面试】—— HTML+CSS相关
目录 1.css中可以让文字在垂直和水平方向上重叠的两个属性是什么? 2.如何垂直居中一个浮动元素? 3.px和em的区别 4.描述一个"reset"的CSS文件并如何使用它.知道 ...
html怎么使两个div模块并列居中,css怎样让两个div重叠,怎么让整个div居中
css怎样让两个div重叠CSS如何使两个div重叠,css使两个div重叠的方法:首先,使用[position:absolute]属性为div设置绝对定位:然后使用z-index属性确定哪个div在 ...
[jQuery基础] jQuery对象 -- CSS相关
CSS相关操作CSS 逐个设置 $(function () {$("div").css("width", "100px")$(" ...
【web前端面试题整理03】来看一点CSS相关的吧
前言昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...
Henry前端笔记之 CSS相关
Henry前端笔记之 CSS相关深入理解vertical-align和line-height的基友关系深入理解vertical-align和line-height的基友关系详见:基友理解 px. ...
【web前端面试题整理03】来看一点CSS相关的吧 - 叶小钗
原帖地址:http://www.cnblogs.com/yexiaochai/p/3154031.html 前言昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间 ...
PCB相关知识-PCB各层的用途
文章目录 PCB各层的用途丝印层Silkscreen Layers 阻焊层SolderMask Layers 助焊层PasteMask Layers 电气层Electrical Layers 机械层 ...
[转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

html层重叠,HTML/CSS相关问题 z-Index层重叠顺序

html层重叠,HTML/CSS相关问题 z-Index层重叠顺序相关推荐

最新文章

热门文章