在 GitHub 上查看
位置
使用这些速记实用程序快速配置元素的位置。
通用值
快速定位类可用,但它们没有响应能力。
<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>