【固定定位、粘滞定位-尚硅谷源代码】

最新推荐文章于 2024-12-16 10:02:26 发布

chenshuangzhi

最新推荐文章于 2024-12-16 10:02:26 发布

阅读量363

点赞数

文章标签：学习前端 html html5 css

本文链接：https://blog.youkuaiyun.com/chenshuangzhi/article/details/126149819

版权

本文介绍了前端开发中两种重要的定位技术——固定定位和粘滞定位。固定定位通过设置position属性为fixed，使元素相对于浏览器视口定位，不随滚动条移动。而粘滞定位在position属性设为sticky时，表现类似相对定位，但当元素到达特定位置时会自动固定，提供了一种动态固定的定位效果。内容来源于尚硅谷课程的学习笔记，适合开发者复习定位概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、固定定位
二、粘滞定位

一、固定定位

固定定位:

        -将元素的position属性设置为fixed则开启了元素的固定定位

        -固定定位也是一种绝对定位，所有固定定位的大部分特点都和绝对定位一样

                唯一不同的是固定定位永远参考于浏览器的视口进行定位

                固定定位的元素不会随网页的滚动条滚动

<!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>固定定位</title>
    <style>

    body{
            font-size: 40px;
            height: 5000px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        .box2{
            width: 500px;
            height: 500px;
            background-color: orange;
        }

        .box3{
            width: 400px;
            height: 400px;
            background-color: coral;
        }

        .box4{
            width: 200px;
            height: 200px;
            background-color: palevioletred;
            /* 此时开启了固定定位 */
            position: fixed;
            /* 此时看到box4固定在浏览器视口，滚动条滚动也没有影响它的定位 */
            top: 50px;
            left: 100px;
        }

        .box5{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2
        <div class="box3">3
            <div class="box4">4</div>
        </div>
    </div>
    <div class="box5">5</div>
</body>
</html>

二、粘滞定位

粘滞定位

        -当元素的position属性设置为sticky则开启了元素的粘滞定位

        -粘滞定位和相对定位的特点基本一致，

        不同的是粘滞定位可以在元素到达某个位置时将其固定

<!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>粘滞定位</title>
    <link rel="stylesheet" href="./reset.css">
    <style>
        body{
            height: 5000px;
        }
        .title{
            width: 1210px;
            height: 48px;
            background-color: #E8E7E3;
            margin:50px auto;

            /* 开启了粘滞定位 */
            position: sticky;
            top: 0px;

            /* 向下拖动滚动条时，可以看到元素在距离顶部10px的位置就固定住在页面中的位置 */
            top: 10px;

        }

        .title li{
            float: left;
            line-height: 48px;
        }

        .title li:hover{
            background-color: #3F3F3F;
        }

        .title a{
            display: block;
            text-decoration: none;
            font-size: 18px;
            color: #777777;
            padding: 0 39px;

        }

        .title a:hover{
            color: #D7D6D2;
        }

        .title li:last-child a{
            padding: 0 43px 0 42px;
        }

        .title li:first-child a{
            padding: 0 41px 0 41px;
        }

       
    </style>
</head>
<body>
    <ul class="title">
        <li><a href="#">HTML/CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">WebBuilding</a></li>
        <li><a href="#">Reference</a></li>
       
    </ul>
</body>
</html>

此笔记来自于跟尚硅谷老师学习自己所写，用于自我复习