z-index属性

最新推荐文章于 2022-03-24 11:47:01 发布

jwz934738949

最新推荐文章于 2022-03-24 11:47:01 发布

阅读量1k

点赞数

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/jwz934738949/article/details/90073077

版权

HTML与CSS 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

在定位流中，定位流默认会覆盖标准流的元素；另外，后写的定位流元素也会覆盖之前的定位流元素。

通过设置z-index的值来判断由哪个元素进行覆盖。

z-index值较大的会覆盖值小的元素。注意当父元素设置了z-index后，子元素的z-index值会失效，父元素值大，子元素会覆盖父元素小的那个子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 200px;
            width: 200px;
            position: relative;
        }

        .b1 {
            background-color: red;
            z-index: 2;
        }

        .b2 {
            background-color: blue;
            z-index: 1;
        }

        .c1 {
            height: 50px;
            width: 50px;
            position: fixed;
            background-color: yellow;
            top: 30px;
            left: 260px;
        }

        .c2 {
            height: 50px;
            width: 50px;
            position: fixed;
            background-color: tomato;
            top: 20px;
            left: 240px;
        }
    </style>
</head>
<body>
<div class="b1">
    <span class="c1">我是子元素</span>
</div>
<div class="b2">
    <span class="c2">我是子元素</span>
</div>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
z-index属性

在定位流中，定位流默认会覆盖标准流的元素；另外，后写的定位流元素也会覆盖之前的定位流元素。通过设置z-index的值来判断由哪个元素进行覆盖。z-index值较大的会覆盖值小的元素。注意当父元素设置了z-index后，子元素的z-index值会失效，父元素值大，子元素会覆盖父元素小的那个子元素。<!DOCTYPE html><html lang="en">...
复制链接

扫一扫