位置

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

共同价值观

可以使用快速定位类，但它们没有响应。

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