css解决使用固定定位导致下方元素上移到固定定位元素的位置

最新推荐文章于 2023-12-25 16:38:25 发布

DevXTalk

最新推荐文章于 2023-12-25 16:38:25 发布

阅读量2.5k

点赞数 1

文章标签： css html 前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45839894/article/details/127207409

版权

问题描述

固定定位相对于视口定位，如果上方有一个div元素，开启固定定位以后，这个div就会脱离文档流（“漂浮走了”），那么原来的这个div所占据的位置，就会空出来，就会导致下方的div元素蹿升上来。就会导致布局的紊乱。解决方式其实很简单，再加一个div占据住开启固定定位的元素的位置。这个div可以是兄弟div（在下面加），也可以是父级div（再套一层）。但是新加的占位的div宽高必须要和开启固定定位的元素的宽高一致。这样看这才正常。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            width: 100%;
            height: 80px;
            background-color: #baf;
            position: fixed;
        }
        .bottom {
            width: 100%;
            height: 100px;
            background-color: #faf;
        }
        .fatherDiv {
            width: 100%;
            height: 80px;
        }
        .brotherDiv {
            width: 100%;
            height: 80px;
        }
    </style>
</head>
<body>
    <!-- 方式一，加一个父级div占住位置 -->
    <div class="fatherDiv">
        <div class="top"></div>
    </div>
    <!-- <div class="brotherDiv"></div>     方式二：加一个兄弟div占住位置 -->
    <div class="bottom"></div>
</body>
</html>

DevXTalk

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css解决使用固定定位导致下方元素上移到固定定位元素的位置

问题描述固定定位相对于视口定位，如果上方有一个div元素，开启固定定位以后，这个div就会脱离文档流（“漂浮走了”），那么原来的这个div所占据的位置，就会空出来，就会导致下方的div元素蹿升上来。就会导致布局的紊乱。解决方式...
复制链接

扫一扫