层级的引入

元素开启定位之后会提升自己的层级。
无论是什么定位，提升后的层级都是一样的，所以后面的开启定位给的元素会盖住前面的开启定位的元素。
eg
:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>.box1{width: 200px;height: 200px;background-color: salmon;position: absolute;}.box2{width: 200px;height: 200px;background-color: rgb(57, 194, 103);position: absolute;top: 50px;left: 50px;}.box3{width: 200px;height: 200px;background-color: rgb(134, 114, 250);position: absolute;top: 100px;left: 100px;}.box4{width: 200px;height: 200px;background-color: rgb(255, 227, 103);position: absolute;top: 150px;left: 150px;}.box5{width: 200px;height: 200px;background-color: rgb(255, 202, 103);position: relative;top: 200px;left: 200px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div></body>
</html>

输出：

定位元素层级的修改

对于开启了定位元素，可以通过z-index属性来指定元素的层级。

规则：

z-index需要一个整数作为参数,值越大元素的层级越高，元素的层级越高越优先显示
如果元素的层级一样，则优先显示靠下的元素
祖先的元素的层级再高也不会盖住后代元素
eg：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>body{font-size: 50px;}.box1{width: 200px;height: 200px;background-color: salmon;position: absolute;z-index: 5;}.box2{width: 200px;height: 200px;background-color: rgb(57, 194, 103);position: absolute;top: 50px;left: 50px;z-index: 4;}.box3{width: 200px;height: 200px;background-color: rgb(134, 114, 250);position: absolute;top: 100px;left: 100px;z-index: 3;}.box4{width: 200px;height: 200px;background-color: rgb(255, 227, 103);position: absolute;top: 80px;left: 80px;z-index: 2;}.box5{width: 200px;height: 200px;background-color: rgb(255, 202, 103);position: relative;top: 200px;left: 200px;z-index: 1;}</style>
</head>
<body><div class="box1">1</div><div class="box2">2</div><div class="box3">3<div class="box4">4</div></div><div class="box5">5</div></body>
</html>

元素的层级——CSS相关推荐

Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
CSS之定位（元素的层级z-index）
元素的层级z-index: <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
元素的层级和背景图片
z-index(数值)设置元素层级设置层级后,父元素层级在高也不会盖住子元素如果定位元素的层级是一样,则下边的元素会盖住上边的通过z-index属性可以用来设置元素的层级可以为z-index指 ...
相对定位绝对定位固定定位元素的层级
相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景相对定位 <!DOCTYPE html> <html lang="e ...
html 中设置样式方式,在html元素中设置css样式的方式是什么
如果我们要在HTML元素中设置CSS样式,那么我们就需要在元素中设置"id" 和 "class"选择器. (推荐教程:CSS教程) 下面我们来分别说一下id选择 ...
[css] 如何将元素的所有css属性恢复为初始化状态？
[css] 如何将元素的所有css属性恢复为初始化状态? all:upset 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前 ...
html怎么设置img样式,img 元素可以用 CSS 设置样式吗?
img 元素可以用 CSS 设置样式吗? img 元素可以用 CSS 设置样式. 下面本篇文章介绍一下 CSS 对于 < img > 图片的常见操作. 有一定的参考价值, 有需要的朋友可以 ...
JQuery 添加动态元素JS或CSS无效
1.动态添加的元素无法绑定事件平时写前端页面,经常用到模板引擎,或者是后期通过json动态生成的元素需要绑定各种事件,但是怎么调用都调用不到,是因为,页面加载的时候,你的js已经执行完了,但是元素还 ...
【伪类与伪元素】用CSS伪元素（以:before为例）插入图片
[伪类与伪元素]用CSS伪元素(以:before为例)插入图片对于一些小图标类型的图片,若使用<img>略微有些麻烦,iconfont是一个不错的选择用起来也相当灵活,但是所需要步骤较为 ...

元素的层级——CSS

文章目录

层级的引入

定位元素层级的修改

元素的层级——CSS相关推荐

最新文章

热门文章