使用这些工具快速配置元素的位置。
快速增加定位的类不包含响应式设计。
<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>