今天重新看了一下关于css的position布局,MDN受益良多。
position粗略地来说分为五种布局:static, relative, absuolate , fixed(类似于absulate), sticky,其中比较不常用的就是sticky布局(粘性布局),因为兼容性的问题,所以现在浏览器对他的兼容性不是很好。
- static布局 贯穿于文档流中,其中top, right, bottom, legt 和z-index属性对其无效,static布局是默认的布局
- relative布局 组件仍然在文档流中中,它的位置是相对于他自身值的top, right, bottom ,left的。 这种偏移量不会影响其他组件的位置。再在不改变页面布局的前提下调整元素位置。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
- absolute布局 不为元素预留空间,通过指定元素相对于非static定位祖先元素的偏移来确定位置。可以设置margin(外边距),并且不会与其他外边距合并。
- fixed 布局 不为元素预留空间,通过指定元素与屏幕窗口的位置来指定元素位置。元素在屏幕滚动时会保持位置不变。打印时,元素会出现在每页固定的地方。
- sticky布局 根据正常流计算盒位置,然后相对于该元素在流中的flowroot和containing block定位。