position定位

最新推荐文章于 2025-04-28 09:49:15 发布

代码粉碎大师

最新推荐文章于 2025-04-28 09:49:15 发布

阅读量336

点赞数 4

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_51097961/article/details/138794931

版权

CSS position 属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

position 属性的值：
1.static（默认值）：元素按照正常的文档流进行定位，此时 top, right, bottom, left 和z-index 属性无效。
2.relative(相对定位)：元素相对于其正常位置进行定位，即相对于它在文档流中的原始位置，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

    <div class="relativeBox">
        <div class="normalBox">
            <div class="box">
                没设置relative定位
            </div>

            <p>注意：由于.box设置了相对定位并移动了位置，但它仍然保留了原位置的空间。</p>
        </div>
        <div class="container">
            <div class="box">
                relative定位元素，相对于其容器进行移动。
            </div>

            <p>注意：由于.box设置了相对定位并移动了位置，但它仍然保留了原位置的空间。</p>
        </div>
    </div>
  <style>
      .relativeBox {
        width: 1000px;
        height: 220px;
        display: flex;
        justify-content: space-around;

        .normalBox {
            width: 300px;
            height: 200px;
            border: 1px solid red;

            .box {
                width: 200px;
                height: 100px;
                background-color: lightblue;
            }
        }

        .container {
            width: 300px;
            height: 200px;
            border: 1px solid black;

            .box {
                width: 200px;
                height: 100px;
                background-color: lightblue;
                position: relative;
                top: 20px;
                left: 30px;
            }
        }


    }
  </style>

如图所示：
在这里插入图片描述
3.absolute(绝对定位)： 当你为HTML元素设置position:absolute;时，这个元素会脱离正常的文档流，并相对于其最近的已定位祖先元素（即position属性不是static的祖先元素）进行定位。“已定位的祖先元素”是指那些position属性被设置为relative、absolute、fixed或sticky的元素。如果绝对定位元素没有这样的祖先元素，那么它就会相对于整个文档的初始包含块（通常是浏览器窗口）进行定位。

    <hr style="margin-top: 200px;">
    <div style="margin-top: 30px;">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            3.absolute(绝对定位)：当你为HTML元素设置position:absolute;时，这个元素会脱离正常的文档流，
            并相对于其最近的已定位祖先元素（即position属性不是static的祖先元素）进行定位。
            “已定位的祖先元素”是指那些position属性被设置为relative、absolute、fixed或sticky的元素。
            如果绝对定位元素没有这样的祖先元素，那么它就会相对于整个文档的初始包含块（通常是浏览器窗口）进行定位。
        </p>
    </div>
    <div class="absoluteBox">
        <div class="normalBox">
            <div class="box">
                没设置定位
            </div>
            <p>检查其是否脱离文档流</p>
        </div>

        <div class="containera">
            <div class="box">
                absolute定位元素，相对于其最近的已定位祖先元素进行定位。
            </div>
            <p>检查其是否脱离文档流</p>
        </div>

        <div class="containerb">
            <div class="box">
                absolute定位元素，没有祖先元素，相对于整个文档的初始包含块（浏览器窗口）进行定位,它的位置会随着页面的滚动而滚动。
            </div>
            <p>检查其是否脱离文档流</p>
        </div>

    </div>
  <style>
      .absoluteBox {
        width: 1000px;
        height: 220px;
        display: flex;
        justify-content: space-around;

        .normalBox {
            width: 300px;
            height: 200px;
            border: 1px solid red;

            .box {
                width: 200px;
                height: 100px;
                background-color: lightblue;
            }
        }

        .containera {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            position: relative;

            .box {
                width: 200px;
                height: 100px;
                background-color: lightblue;
                position: absolute;
                top: 20px;
                left: 30px;
            }
        }

        .containerb {
            width: 300px;
            height: 200px;
            border: 1px solid black;

            .box {
                width: 200px;
                height: 100px;
                background-color: lightblue;
                position: absolute;
                top: 20px;
                left: 30px;
            }
        }
    }
  </style>

如图所示：
在这里插入图片描述
4.fixed： 元素相对于浏览器窗口进行定位，即使页面滚动，它也会停留在同一的位置。

    <hr>
    <div style="margin-top: 30px;">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            4.fixed：元素相对于浏览器窗口进行定位，即使页面滚动，它也会停留在同一的位置。
        </p>
    </div>
    <div class="fixedBox">
        <div class="normalBox">
            <div class="box">
                没设置定位
            </div>
            <p>检查其是否脱离文档流</p>
        </div>

        <div class="container">
            <div class="box">
                fixed定位元素，相对于浏览器窗口进行定位(它的位置不会随着页面的滚动而滚动)
            </div>
            <p>检查其是否脱离文档流</p>
        </div>

    </div>
  <style>
   .fixedBox {
        width: 1000px;
        height: 1000px;
        display: flex;
        justify-content: space-around;

        .normalBox {
            width: 300px;
            height: 200px;
            border: 1px solid red;

            .box {
                width: 200px;
                height: 100px;
                background-color: lightblue;
            }
        }

        .container {
            width: 300px;
            height: 200px;
            border: 1px solid black;

            .box {
                width: 200px;
                height: 100px;
                background-color: lightblue;
                position: fixed;
                top: 50%;
                left: 50%;
            }
        }
    }

  </style>

如下所示：

定位

5.sticky： 这是相对于用户的滚动位置来定位的元素。一个sticky元素在用户滚动超过其滚动阈值之前为相对定位，之后为固定定位。把sticky元素想象成一个“粘性”便签，它最初会跟着页面内容一起滚动。但是，当你滚动页面到达某个特定位置（通常是元素的初始位置）时，这个便签就会“粘”在那个位置，不再随着页面滚动而移动，直到你滚动回足够远的位置，它才会重新变得可以滚动。
举个例子，假设你有一个搜索框或者是分类导航，当页面滚动时，你希望这个内容在滚动到一定位置后固定在视窗的某个地方。你可以给这个内容设置position:sticky;，并指定一个top值。这样，当页面滚动到设置的top位置时，内容就会“粘”在那里，不再滚动。

    <hr>
    <div style="margin-top: 30px;">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            5.sticky：这是相对于用户的滚动位置来定位的元素。基本上，一个sticky元素在用户滚动超过其滚动阈值之前为相对定位，之后为固定定位。
            你可以把sticky元素想象成一个“粘性”便签，它最初会跟着页面内容一起滚动。但是，当你滚动页面到达某个特定位置（通常是元素的初始位置）时，
            这个便签就会“粘”在那个位置，不再随着页面滚动而移动，直到你滚动回足够远的位置，它才会重新变得可以滚动。
            举个例子，假设你有一个搜索框或者是分类导航，当页面滚动时，
            你希望这个内容在滚动到一定位置后固定在视窗的某个地方。这时，你可以给这个内容设置position:sticky;，并指定一个top值。
            这样，当页面滚动到设置的top位置时，内容就会“粘”在那里，不再滚动。
        </p>
    </div>
    <div class="stickyBox">
        <div class="sticky-container">
            <div class="sticky">
                sticky定位元素
            </div>
            <p>方便查看滚动页面的效果</p>
        </div>

    </div>
  <style>
      .stickyBox {
        border: 1px solid black;
        .sticky-container {
            height: 2000px;
            /* 为了能够滚动查看效果 */
            position: relative;
            /* 确保 sticky 定位是相对于这个容器，而不是整个文档 */
        }

        .sticky {
            position: sticky;
            top: 0;
            /* 设定 sticky 的顶部偏移 */
            padding: 10px;
            background-color: #3498db;
            color: white;
            font-size: 20px;
        }
    }
  </style>

如下所示：

sticky布局