Source

位置

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

共同价值观

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

<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: stickyposition: relative. 因此,我们将样式包装在@supports查询中,将粘性限制在只能正确呈现它的浏览器上。

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