重叠的元素--z-index属性

最新推荐文章于 2024-06-20 18:01:37 发布

Java晓姐姐

最新推荐文章于 2024-06-20 18:01:37 发布

阅读量181

点赞数

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_60323584/article/details/126605254

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。

son1:z-index:1

son2:z-index:2

son1在son2下面

<!DOCTYPE html>
<html>
<head>
    <title>position</title>
    <style>
        body{
            background-color: green;
        }
        .parent{
            position:relative;
            right:-5px;
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .son1{
            z-index:1;
            position: absolute;
            left:50px;
            top:50px;
            width: 100px;
            height: 100px;
            background-color: blue;
            
        }
        .son2{
            z-index:2;
            position: absolute;
            left:80px;
            top:80px;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>
</html>