CSS中Fixed的属性

田

发布于 2021-11-08 10:28:10

1.4K0

发布于 2021-11-08 10:28:10

文章被收录于专栏：IT杂症

css中常见的布局问题中定位是比较难懂的一个点

比如relative和absolute定位

fixed定位与relative的关系

下面这个小demo演示一下fixed与父级子级同级的效果展示这三个div都是【fixed】属性,但你会发现父级的zindex这时压根没盖过子级的z-index 同级的情况下是会被遮罩住的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fixed</title>
    <style>
        body {
            min-height: 1500px;
            font-size: 20px;
        }

        .rel {
            position: fixed;
            top: 120px;
            background: #f50;
            width: 600px;
            height: 200px;
            z-index: 10008;
            text-align: right;
            color: #fff;
            padding: 10px;
        }

        .fixed {
            position: fixed;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background: green;
            z-index: 9;
            color: #fff;
            padding: 10px;
        }

        .other {
            position: fixed;
            top: 150px;
            left: 50px;
            background: #000;
            width: 200px;
            height: 200px;
            z-index: 10008;
            text-align: right;
            color: #fff;
            padding: 10px;
        }
    </style>
</head>

<body>

    <div class="rel">
        父级：fixed z-index:18
        <div class="fixed">子级：fixed z-index:9</div>

    </div>
    <div class="other">橙色同级：fixed z-index:10008</div>

</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020年08月26日，如有侵权请联系 cloudcommunity@tencent.com 删除

css