• 固顶(底)及定位
    • 通用属性
    • 固定在top顶部
    • 固定在bottom底部
    • 贴齐于top顶部

    固顶(底)及定位

    使用下面这些样式方法可以快速对远素的位置进行设定,包括固顶、固底以及定位。

    通用属性

    使用.position-*样式,可以实现快速定位-虽然它们不包含响应式支持。

    1. <div class="position-static">...</div>
    2. <div class="position-relative">...</div>
    3. <div class="position-absolute">...</div>
    4. <div class="position-fixed">...</div>
    5. <div class="position-sticky">...</div>

    固定在top顶部

    将一个元素固定在可见区域的顶部,从边到边的对齐,用户在使用固定在顶部时请确认效果带来的影响(如覆盖)-必要时增加额外的自定义CSS。

    1. <div class="fixed-top">...</div>

    固定在bottom底部

    将一个元素固定在可见区域的底部,从边到边的对齐,用户在使用固定在底部时请确认效果带来的影响(如覆盖)-必要时增加额外的自定义CSS。

    1. <div class="fixed-bottom">...</div>

    贴齐于top顶部

    将一个元素轩于可见区域的顶部,从边到边-但只在你的浏览器窗口滚动才能激活它,该 .sticky-top 样式使用 position: sticky不能在所有浏览器中获得支持。

    Microsoft Edge 和 IE11 呈现 position: sticky 使用的是 position: relative. 属性,因此我们将这个样式增加了 @supports 动态变量,限制在可支持的浏览器上运行。

    1. <div class="sticky-top">...</div>