小白秒懂position定位

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

  1. static(默认值): 元素使用正常的文档流布局,不进行特殊的定位处理。toprightbottomleftz-index 属性对 static 元素无效

  2. relative(相对定位): 相对于其原来的位置进行定位不会脱离文档流,通过设置 toprightbottomleft 属性来调整元素相对于其初始位置的偏移。

  3. absolute(绝对定位): 元素相对于最近的非static祖先元素(如:子绝父相)或文档窗口进行绝对定位,会脱离文档流,不占用原来的位置,其他元素不会对其产生影响,如果没有已定位的祖先元素,则相对于文档窗口进行定位。通过设置 toprightbottomleft 属性来指定元素在页面上的位置。

  4. fixed(固定定位): 元素相对于浏览器窗口定位,不随页面滚动而改变位置,始终保持在固定位置通过设置 toprightbottomleft 属性来指定元素在窗口上的位置。

  5. sticky(粘性定位): 介于relative和fixed之间。滚动前relative,滚动到固定位置后变为fixed,通过设置 toprightbottomleft 属性来指定元素在页面上的位置。

  <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>

使用不同的 position 值,结合其他定位属性如 toprightbottomleft 可以实现各种不同的布局效果和定位方式,帮助实现更灵活的页面布局。

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值