css定位 position


position:

fixed 绝对定位 IE8+

相对于: 浏览器窗口(x0, y0), 相对于屏幕视口(viewport)的位置

位置设置: "left", "top", "right" 以及 "bottom" 属性

- 不占用文档流位置

- 元素的位置在屏幕滚动时不会改变

absolute 绝对定位

相对于: 相对于最近的非 static 定位祖先元素, 推荐将父元素relative相对定位;

位置设置: "left", "top", "right" 以及 "bottom" 属性

- 绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。

- 不占用文档流位置

relative 相对定位/偏移

相对于: 相对于原来的位置,但是原来的位置仍然保留.

位置设置: "left", "top", "right" 以及 "bottom" 属性设置偏移, 值可负; "left:20" 会向元素的 LEFT 位置添加 20 像素

- position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

static

相对于: 文档常规流正常位置

位置设置: 无

- 此时 top, right, bottom, left 和 z-index 属性无效

inherit

从父元素继承 position 属性的值

定位技巧