CSS中几种定位的简单描述与对比

• 静态定位(static):

position属性的默认值为static，会忽略 top, bottom, left, right 或者 z-index 声明。

• 相对定位(relative)与绝对定位(absolute):

1.  相对定位偏移参考元素是元素本身，而绝对定位以父辈元素中最近的定位元素为参考坐标（父辈没有定位元素则参考html），因此常用“子绝父相”；
2. 相对定位没有脱离文档流，其原有位置依然被其保留占据；绝对定位脱离文档流，浮动半脱离（文字环绕）。

  

• 绝对定位(absolute)与固定定位(fixed):

绝对定位相对与第一屏，固定定位相对于浏览器窗口。

• 粘性定位(sticky):

 起先它会被相对定位，直到在视图窗口中遇到给定的偏移位置为止，然后将其“粘贴”在适当的位置。常用作导航栏。