固顶(底)及定位

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

通用属性

使用.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>