CSS元素层级的概念及性质
元素的层级的介绍
什么是元素的层级
当元素开启定位后就会是元素提升一个层级,网页是由多个层级组成的
<style>
*{
font-size: 50px;
font-weight: bold;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
opacity: .7;
position: absolute;
}
.box2{
width: 200px;
height: 200px;
background-color: red;
opacity: .7;
position: absolute;
left: 60px;
top: 60px;
}
.box3{
width: 200px;
height: 200px;
background-color: orange;
opacity: .7;
position: absolute;
left: 120px;
top: 120px;
}
</style>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
通过z-index可以改变开启定位元素的层级
<style>
*{
font-size: 50px;
font-weight: bold;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
position: absolute;
z-index: 3;
}
.box2{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 60px;
top: 60px;
z-index: 1;
}
.box3{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
left: 120px;
top: 120px;
z-index: 2;
}
</style>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
父元素的层级再高也不会遮盖住子元素
大家可以想一下,如果父元素都需要去盖过子元素了,那设置这个子元素的意义是不是就不大了
<style>
*{
font-size: 50px;
font-weight: bold;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
position: absolute;
z-index: 3;
}
.box2{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 60px;
top: 60px;
z-index: 1;
}
.box3{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
left: 120px;
top: 120px;
z-index: 2; /* 父元素的层级再高也不会遮盖住子元素 */
}
.box4{
width: 100px;
height: 100px;
background-color: tomato;
position: absolute;
left: 100px;
z-index: 1;
}
</style>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">
3
<div class="box4">4</div>
</div>
</body>
CSS元素层级的概念及性质的更多相关文章
- css中的一些概念
1.伪类与伪元素 1.单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素. 2.对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作用 ...
- 5：CSS元素类型
5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- css元素垂直居中方法
1.Line-height 适用情景:单行文字垂直居中技巧 这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框.导航此类元素最常见到的方式了.此方式的原理是在于将单行 ...
- 【WEB自动化】【第一节】【Xpath和CSS元素定位】
目前自动化测试开始投入WEB测试,使用RF及其selenium库,模拟对WEB页面进行操作,此过程中首先面对的问题就是对WEB页面元素的定位,几乎所有的关键字都需要传入特定的WEB页面元素,因此掌握常 ...
- CSS中一些重要概念
在CSS的最后一个博客中,将学习整理一些CSS中的重要概念,对这些重要概念的掌握,将对CSS的认识十分重要. 了解这些概念对深入理解CSS的本质十分重要:(1)包含块containing block ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- 一天搞定CSS：层级(z-index)--18
因为定位的出现,所以有了元素重叠的情况,此时就出现了显示谁的情况.在多层布局时,容易出现这种情况 定位position见:http://blog.csdn.net/baidu_37107022/art ...
- Selenium自动化-CSS元素定位
接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式 大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...
随机推荐
- C语言实现2048小游戏
目录 2048 一.设计思路 1.游戏规则 2.思路 二.代码实现 1.存储结构 2.初始化游戏数据 3.向左合并 4.其他方向合并 5.产生新的方块 6.源代码 7.实例演示 三.问题 2048 一 ...
- Codeforces Global Round 8 A. C+=（贪心）
题目链接:https://codeforces.com/contest/1368/problem/A 题意 给出 $a,b$,只可以使用 '+=' 运算符,问至少要使用多少次使得 $a$ 或 $b$ ...
- 【noi 2.6_9284】盒子与小球之二（DP）
题意:有N个有差别的盒子和分别为A个和B个的红球和蓝球,盒子内可空,问方案数. 解法:我自己打的直接用了求组合C的公式,把红球和蓝球分开看.对于红球,在N个盒子可放任意个数,便相当于除了A个红球还有N ...
- fzu2218 Simple String Problem
Accept: 2 Submit: 16 Time Limit: 2000 mSec Memory Limit : 32768 KB Problem Description Recent ...
- Linux ulimit使用
什么是ulimit? ulimit是一个可以设置或者汇报当前用户资源限制的命令.使用ulimit命令需要有管理员权限,它只能在允许使用shell进行控制的系统中使用.也就是说它已经被嵌入到shell当 ...
- Kubernets二进制安装(17)之安装部署Dashboard
1.下载dashboard镜像 在运维主机(mfyxw50.mfyxw.com)上执行命令 [root@mfyxw50 ~]# docker pull registry.cn-hangzhou.ali ...
- 网络安全-企业环境渗透2-wordpress任意文件读&&FFmpeg任意文件读
参考 http://prontosil.club/posts/c08799e1/ 一. 实验名称 企业环境渗透2 二. 实验目的 [实验描述] 操作机的操作系统是kali 进入系统后默认是命令行界面 ...
- P3373 线段树2（多重标记线段树）题解
题意: 操作有:区间加,区间乘,区间询问求和 思路: 设一个数为\(m*sum+a\),加就变成了\(m*sum+a+a_2\),乘就变成了\(m*m_2*sum+a*m_2\),所以我们设两个标记\ ...
- How to enable HTTPS for local development in macOS using Chrome
How to enable HTTPS for local development in macOS using Chrome HTTPS, macOS, Chrome local HTTPS htt ...
- DOM & Node.contains
DOM & Node.contains Node.contains() https://developer.mozilla.org/en-US/docs/Web/API/Node/contai ...