CSS position 用法-趣百科

CSS position 用法

基于样式表的定位，使用属性position来完成。

具体有四个值可用。

1、absolute（绝对定位，相对于static定位以外的第一个父元素进行定位）

2、fixed（固定定位，相对于浏览器窗口进行定位）

3、relative（相对定位，相对于其正常位置进行定位）

4、static（没有定位，默认值，元素出现在正常的文档流中，这样会忽略top, bottom, left, right 或者 z-index 声明）

5、inherit（继承定位，从父元素继承 position 属性的值）

absolute 绝对定位

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 200px。

fixed 固定定位

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

定位1文本。

定位2文本。

relative 相对定位

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

正常位置的标题

static 没有定位

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit规定应该从父元素继承 position 属性的值。