位置(position)

使用这些工具快速配置元素的位置。

通用属性

快速增加定位的类不包含响应式设计。

<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 类可以让一个元素粘性置顶,它采用了 position: sticky 属性,不过这一属性目前不是所有浏览器都支持。

扩展阅读:关于 position: sticky 的具体说明(中文,来源:cnblog)

IE11 和 IE10 会把 position: sticky 作为 position: relative 因此,我们将样式包装在 @supports 查询中,将 position: sticky 制为只能正确呈现它的浏览器。

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