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

時間 2021-03-13

標籤 html 瀏覽器佈局性能 code htm 事件文檔欄目 CSS 简体版

原文原文鏈接

問題描述

固定定位相對於視口定位，若是上方有一個div元素，開啓固定定位之後，這個div就會脫離文檔流（「漂浮走了」），那麼原來的這個div所佔據的位置，就會空出來，就會致使下方的div元素躥升上來。就會致使佈局的紊亂。解決方式其實很簡單，再加一個div佔據住開啓固定定位的元素的位置。這個div能夠是兄弟div（在下面加），也能夠是父級div（再套一層）。可是新加的佔位的div寬高必需要和開啓固定定位的元素的寬高一致。這樣看這才正常。html

<!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耗費性能，監聽瀏覽器滾動的時候卻是好辦。不過判斷瀏覽器什麼時候滾動停下卻是麻煩，再者若是瀏覽器滾動停下了，取消固定定位，就會失去滾動的效果，等。這個方式，我本身試了試，很是麻煩並且解決不了問題。因此最優解就是使用上述中的方式一。瀏覽器