CSS `position` 属性

说明

position CSS 属性指定元素的定位方式。

下表总结了此属性的使用上下文和版本历史记录。

提示： 具有 position 而非 static 的元素称为已定位。它们在堆叠上下文中的垂直位置由 z-index 属性确定。

属性的语法如下：

position:

下面的示例显示了 position 属性的作用。

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

注意： 在打印媒体类型的情况下，框在每一页上呈现，并且相对于页面框是固定的，即使通过视口看到页面（在 '打印预览' - 例如）。

下表描述了该属性的值。

值	说明
`static`	元素的盒子是一个普通盒子，按照正常流程布局。静态框的 `top`, `right`, `bottom`, `left`, 和 `z-index` 属性被忽略。这是默认值。
`relative`	元素相对于其正常位置定位（这称为正常流中的位置）。
`absolute`	该元素相对于其位置值不是静态的第一个祖先元素定位。
`fixed`	该元素相对于屏幕的视口是固定的，并且在滚动时不会移动。打印时，元素打印在每一页上。
`sticky`	该元素的定位类似于一个相对定位的盒子，它"粘"到它最近的具有"滚动机制"的祖先。
`initial`	将此属性设置为其默认值。
`inherit`	如果指定，则关联元素采用其父元素 `position` 属性的计算值。

所有主要的现代浏览器都支持 position 属性。

请参阅以下教程： CSS 位置, CSS 层.