css固定定位，不隨滾動條滾動

本文轉載自查看原文 2021-04-17 18:27 903

<!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>
        body{
            font-size: 60px;
            height:2000px;
        }
        .box1{
            width:200px;
            height:200px;
            background-color: rgb(192, 245, 69);
        }
        .box2{
            width:200px;
            height:200px;
            background-color:orange;
             /*
                固定定位：
                    - 將元素的position屬性設置為fixed則開啟了元素的固定定位
                    - 固定定位也是一種絕對定位，所以固定定位的大部分特點都和絕對定位一樣
                        唯一不同的是固定定位永遠參照於瀏覽器的視口進行定位
                        固定定位的元素不會隨網頁的滾動條滾動
              */
              position: fixed;
              left: 0;
              top:0;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .box4{
            width: 400px;
            height: 400px;
            background-color: tomato;
        }
        
        .box5{
            width: 300px;
            height: 300px;
            background-color: aliceblue;
        }
        
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box4">4
        <div class="box5">5
            <div class="box2">2</div>
        </div>
    </div>
    <div class="box3">3</div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css布局實現：子元素固定定位父元素+遮罩+滾動條+隱藏滾動條 css里設置一個div在頂部固定,不隨滾動條滾動而滾動 HTML 中讓DIV不隨滾動條滾動，使終顯示在瀏覽器的固定位置 CSS的固定定位 div置頂，不隨滾動條滾動而滾動純CSS,table的thead固定,tbody顯示滾動條記錄一個解決固定定位內容不能滾動的方法（vant組件tab必用的css樣式） CSS——靜態定位，相對定位，絕對定位，固定定位 CSS層定位——固定定位，相對定位，絕對定位 css——隱藏滾動條