CSS3 教程

CSS position 属性

实例

定位<h2>元素:

h2 { position:absolute; left:100px; top:150px; }



在此页底部有更多的例子。

属性定义及使用说明

position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。

默认值: static
继承: no
版本: CSS2
JavaScript 语法: object.style.position="absolute"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
position 1.0 7.0 1.0 1.0 4.0

属性值

描述
absolute

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

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

fixed

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

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

relative

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

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

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

粘性定位,该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

inherit 规定应该从父元素继承 position 属性的值。
initial 设置该属性为默认值,详情查看 CSS initial 关键字

Examples

更多实例

Position:relative
这个例子演示了一个元素相对其正常位置如何定位。


相关文章

CSS 教程: CSS Position

其他扩展

用微信扫一扫

收藏