小白秒懂position定位

蕉太狼不焦虑

已于 2023-07-18 11:56:18 修改

阅读量260

点赞数 4

文章标签：前端

于 2023-07-18 10:34:50 首次发布

本文链接：https://blog.csdn.net/weixin_53307278/article/details/131778781

版权

在前端开发中，position 是一个 CSS 属性，用于控制元素的定位方式。它有以下几个可选值：

static（默认值）： 元素使用正常的文档流布局，不进行特殊的定位处理。top、right、bottom、left 和 z-index 属性对 static 元素无效。
relative（相对定位）： 相对于其原来的位置进行定位，不会脱离文档流，通过设置 top、right、bottom、left 属性来调整元素相对于其初始位置的偏移。
absolute（绝对定位）： 元素相对于最近的非static祖先元素（如：子绝父相）或文档窗口进行绝对定位，会脱离文档流，不占用原来的位置，其他元素不会对其产生影响，如果没有已定位的祖先元素，则相对于文档窗口进行定位。通过设置 top、right、bottom、left 属性来指定元素在页面上的位置。
fixed（固定定位）： 元素相对于浏览器窗口定位，不随页面滚动而改变位置，始终保持在固定位置通过设置 top、right、bottom、left 属性来指定元素在窗口上的位置。
sticky（粘性定位）： 介于relative和fixed之间。滚动前relative，滚动到固定位置后变为fixed，通过设置 top、right、bottom、left 属性来指定元素在页面上的位置。

  <style>
    body {
        height: 1500px;
        /* 为了显示效果，增加一些页面高度 */
        margin: 0;
        padding: 0;
    }

    .header {
        background-color: #f1f1f1;
        padding: 10px;
        text-align: center;
        position: sticky;
        top: 30px;
        margin-top: 100px;
    }

    .content {
        padding: 20px;
        text-align: center;
        font-size: 20px;
    }
  </style>

  <body>
    <div class="header">
        <h1>粘性定位示例</h1>
        <p>这是一个粘性头部，距离顶部100px</p>
    </div>

    <div class="content">
        <h2>页面内容</h2>
        <p>这是页面的主要内容。</p>
        <p>当你滚动页面到距离顶部只有30px时，头部会保持在top：30px。</p>
    </div>
  </body>