使用这些速记实用程序快速配置元素的位置。

通用值

快速定位类可用,但它们没有响应能力。

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

固定顶部

将元素定位在视口的顶部,从边缘到边缘。务必了解固定位置在项目中的影响;您可能需要添加额外的 CSS。

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

固定底部

将元素定位在视口的底部,从边缘到边缘。务必了解固定位置在项目中的影响;您可能需要添加额外的 CSS。

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

粘性顶部

将元素定位在视口的顶部,从边缘到边缘,但仅在你滚动经过它之后。.sticky-top 实用程序使用 CSS 的 position: sticky,它在所有浏览器中并未得到完全支持。

IE11 和 IE10 将 position: sticky 渲染为 position: relative因此,我们用 @supports 查询包装样式,仅将粘性限制在可以正确渲染它的浏览器中。

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