- 固顶(底)及定位
- 通用属性
- 固定在top顶部
- 固定在bottom底部
- 贴齐于top顶部
固顶(底)及定位
使用下面这些样式方法可以快速对远素的位置进行设定,包括固顶、固底以及定位。
通用属性
使用.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>
固定在top顶部
将一个元素固定在可见区域的顶部,从边到边的对齐,用户在使用固定在顶部时请确认效果带来的影响(如覆盖)-必要时增加额外的自定义CSS。
<div class="fixed-top">...</div>
固定在bottom底部
将一个元素固定在可见区域的底部,从边到边的对齐,用户在使用固定在底部时请确认效果带来的影响(如覆盖)-必要时增加额外的自定义CSS。
<div class="fixed-bottom">...</div>
贴齐于top顶部
将一个元素轩于可见区域的顶部,从边到边-但只在你的浏览器窗口滚动才能激活它,该 .sticky-top
样式使用 position: sticky
不能在所有浏览器中获得支持。
Microsoft Edge 和 IE11 呈现 position: sticky
使用的是 position: relative
. 属性,因此我们将这个样式增加了 @supports
动态变量,限制在可支持的浏览器上运行。
<div class="sticky-top">...</div>