乐趣区

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

jiezi

问题形容

固定定位绝对于视口定位，如果上方有一个 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>

总结

上述解决形式其实很简略。其实还有一个思路（不过是错的），就是做一个 js 的监听浏览器滚动条的事件，当浏览器滚动的时候，让 div 固定定位，一开始不开启定位，在浏览器停下来的时候，勾销固定定位。貌似是解决问题了。不过先不说应用 js 消耗性能，监听浏览器滚动的时候倒是好办。不过判断浏览器何时滚动停下倒是麻烦，再者如果浏览器滚动停下了，勾销固定定位，就会失去滚动的成果，等。这个形式，我本人试了试，十分麻烦而且解决不了问题。所以最优解就是应用上述中的形式一。

退出移动版