29、元素层级

最新推荐文章于 2022-08-04 21:22:26 发布

五仁卤鸡翅

最新推荐文章于 2022-08-04 21:22:26 发布

阅读量205

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106979864

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
元素层级

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

元素层级

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
body{
    font-size:60px;
}
.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
    position:absolute;
 
   1、对于开启了定位元素，可以通过z-index属性来指定元素的层级
         z-index 需要一个整数作为参数，值越大元素的层级越高
         元素的层级越高越优先显示
         
         元素的层级一样，则优先显示靠下的元素（结构上，后来声明的）
         
         祖先元素层级再高也不会盖住后代元素

    z-index:1;
}
.box2{
    width:200px;
    height:200px;
    background-color:#rgba(255,0,0,0.3);
    position:absolute;
    top:50px;
    left:50px;
    z-index:2;
}
.box3{
    width:200px;
    height:200px;
    background-color:yellow;
    position:absolute;
    top:100px;
    left:100px;
    z-index:3;
}
.box3{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute
}
</style>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3
   <div class="box4"></div>
</div>


</body>