CSS的定位方式(5种)
1.static:正常文档定位,此时top,bottom,left和z-index属性无效,块级元素从上往下纵向排布,行级元素从左往右排列
2.relative: 相对定位,此时的“相对”是相对于正常文档流的位置
3.absolute:相对于最近的非static定位祖先元素的偏移,来确定元素位置,比如一个绝对定位元素他的父级和祖父级元素都为relative,他会相对他的父级而产生偏移
4.fixed: 指定元素相对于屏幕视口(viewport)的位置来指定元素的位置。元素的位置在屏幕滚动时不回改变,比如定义那一种回到顶部的按钮一般都是采用此定位方式
5.sticky:粘性定位,特性近似于relative和fixed的合体,其在实际应用中的近似效果就是IOS通信滚动的时候的“顶屁股”(通过示例说明)
示例HTML:
示例CSS:
示例效果:
(补充:inherit:规定应该从父元素继承 position 属性的值。)