CSS绝对定位固定定位

前一篇文章讲到浮动float、绝对定位position:absolute、固定定位position:fixed可以使元素脱离文档流。

这篇主要来谈谈绝对定位和固定定位。

绝对定位的元素基于最近的position为relative/absolute/fixed祖先元素进行定位。如果没有找到position为relative/absolute/fixed的元素，则基于是以整个 canvas (渲染内容的空间) 的坐标原点(左上)为基准，以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形进行定位，并不是基于根元素定位。

固定定位的元素基于viewport（浏览器视窗）进行定位。

1.绝对定位和固定定位的元素若没有设置top/right/left/bottom的值。其位置为原来在文档流中的位置。其他文档流元素会占据其原来位置。

要使绝对定位或固定定位的元素水平居中，需要设置其width为固定值，并且left: 0; right: 0; margin: auto。

2.绝对定位和固定定位的元素，若其宽度width或高度height的单位为百分比，宽度和高度值是相对于其基于定位的元素计算的。（在使用一些stick插件时尤其要注意这点）。