1.默认层级规则

但层级规则可以通过z-index来设置

1.在正常情况下，层级的大小由顺序决定，后面的元素要比前面的元素的层级要高

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height: 200px;background: red;color: #fff;}.div2{width: 150px;background: green;margin-top: -50px;}span{background: blue;color: #fff;width: 100px;height: 100px;display: block;margin-top: -50px;}</style></head><body><!--在正常情况下，层级的大小由顺序决定，后面的元素要比前面的元素的层级要高--><div>kaivon1</div><div class="div2">kaivon2</div><span>span</span></body>
</html>

效果图

2.有定位元素的层级要比没有定位元素层级要高

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height: 200px;background: red;color: #fff;}.div1{position: relative;}.div2{width: 150px;background: green;margin-top: -50px;}/*span{background: blue;color: #fff;width: 100px;height: 100px;display: block;margin-top: -50px;}*/</style></head><body><!--在正常情况下，层级的大小由顺序决定，后面的元素要比前面的元素的层级要高有定位元素的层级要比没有定位元素层级要高--><div class="div1">kaivon1</div><div class="div2">kaivon2</div><!--<span>span</span>--></body>
</html>

效果图

2.层级(z-index)

层级由属性z-index来控制：

它的值是一个数字，数字越大层级越高（在同一个层里）

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height: 200px;background: red;color: #fff;position: relative;}.div1{z-index: 2;}.div2{width: 150px;background: green;margin-top: -50px;z-index: 1;}</style></head><body><!--在正常情况下，层级的大小由顺序决定，后面的元素要比前面的元素的层级要高有定位元素的层级要比没有定位元素层级要高在都有定位的情况下，层级还是取决于书写顺序z-index             层级它的值是一个数字，数字越大层级越高（在同一个层里）--><div class="div1">kaivon1</div><div class="div2">kaivon2</div></body>
</html>

一天搞定CSS：层级(z-index)--18相关推荐

CSS自学教程--一天搞定CSS（终篇总结）
虽然说是一天搞定CSS,实际上也没有那么简单.只能说让你快速了解常见的CSS知识,解决基本的页面样式布局和设置. 每个独立的CSS知识点都比较简单,但是它们的应用非常灵活,特别是在综合应用中. 粗略说 ...
精通CSS与HTML设计模式第一章（轻松搞定CSS）
精通CSS与HTML设计模式第一章(轻松搞定CSS) 精通CSS与HTML设计模式第二章(HTML设计模式) 精通CSS与HTML设计模式第三章(CSS选择符与继承) 精通CSS与HTML设计模 ...
sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
一篇搞定css基础（超详细，附代码）
第一章:css概述 1.1.css的简介 1)什么是CSS css中文名称叫层叠样式表,层叠为css的布局,表示布局方式是通过一层层来实现的:样式是布局层的显示效果,主要是通过css提供的一些属性和属 ...
十分钟搞定CSS选择器
在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. ...
一张图搞定CSS选择器的优先级
0 总览如果发生CSS的冲突问题, 即A样式与B样式冲突 1 首先比较CSS样式的来源不同的来源有不同的优先级如果来源相同, 即同源时, 则进入下一阶段2 比较是否为内联样式如果A样式与B样式同源, ...
一天搞定CSS（扩展）：CSS Hack
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
一天搞定CSS：定位position--17
1.定位取值概览 2.相对定位relative <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
一天搞定CSS：盒模型content、padding、border、margin--06
1.盒模型网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.这些属性我们可以用日常生活中的常见事物- ...

一天搞定CSS：层级(z-index)--18

1.默认层级规则

2.层级(z-index)

一天搞定CSS：层级(z-index)--18相关推荐

最新文章

热门文章