定位总结

• 介绍 position 属性
• position 有哪些值以及各自的用法
• 相对定位、绝对定位、固定定位的区别

CSS中的定位

有5中方案

• static 静态定位
• relative 相对定位
• absolute 绝对定位
• fixed 固定定位
• sticky 粘性定位

static 静态定位

静态定位就是标准流，块级元素独占一行，内嵌元素共享一行。

是position的默认值，不受top/bottom/left/right的影响。

relative 相对定位

相对于自己原来的位置进行定位，不脱离标准流，相当于偏移。

作用：

• 微调元素的位置
• 做绝对定位的参考，子绝父相。

absolute 绝对定位

参照 离自己最近的、并且定了位 的元素进行偏移。

使用了绝对定位的盒子会脱离标准流，margin也会失效。

绝对定位后的盒子，display会变成block。

绝对定位的参考点

• top 参考点是页面的左上角，而不是浏览器的左上角
• bottom 是浏览器首屏窗口的左下角
• 绝对定位的盒子无视参考元素的padding，以border内侧作为自己定位的参考点。

fixed固定定位

脱离标准流，一种特殊的定位。

对一个盒子进行固定定位后，无论页面怎么滚动，在视觉上盒子不会动。代入网页中不动的广告元素进行理解。

sticky 粘性定位

CSS3新增

注意：

• 父元素的overflow必须是visible，不能是hidden或者auto。父元素要滚动。
• 父元素的高度不能低于sticky元素的高度。
• 如果父元素没有设置定位，则会参考 viewport 视口进行定位，同绝对定位。
• 设置阈值，需要指定top、right、bottom、left四个阈值其中之一，否则其行为与相对定位相同。并且优先级方面 top > bottom; left > right。

效果是：设置粘性定位的元素正常跟着页面滚动即相对定位，当滚动到阈值时，就会变成固定定位的效果。