位置

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

通用值

快速定位类虽然没有响应,但可用。

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

将元素从一个边缘到另一个边缘放置在视口的顶部,但仅在滚动经过该元素之后才可以。 .sticky-top实用程序使用CSS的position:sticky,并非所有浏览器都完全支持。

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

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