目录

CSS position 属性

❮上一节完整的CSS参考下一节❯

示例

定位 <h2> 元素：

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

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个position属性指定用于元素的定位方法的类型（静态、相对、绝对、固定或粘性）。

默认值：	静止的
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS2
JavaScript 语法：	对象.style.position="absolute"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
position	1.0	7.0	1.0	1.0	4.0

笔记：这个stickyInternet Explorer 或 Edge 15 及更早版本不支持该值。

CSS 语法

position: static|absolute|fixed|relative|sticky|initial|inherit;

属性值

Value	Description	Demo
static	Default value. Elements render in order, as they appear in the document flow	Play it »
absolute	The element is positioned relative to its first positioned (not static) ancestor element	Play it »
fixed	The element is positioned relative to the browser window	Play it »
relative	The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position	Play it »
sticky	The element is positioned based on the user's scroll position A sticky element toggles between `relative` and `fixed`, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.	尝试一下 »
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

示例

如何相对于其正常位置定位元素：

h2.pos_left {
position: relative;
left: -20px;
}

h2.pos_right {
position: relative;
left: 20px;
}

亲自试一试 »

示例

更多定位：

#parent1 {
position: static;
  border: 1px solid blue;
  width: 300px;
height: 100px;
}

#child1 {
  position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}

#parent2 {
position: relative;
border: 1px solid blue;
width: 300px;
height: 100px;
}

#child2 {
  position: absolute;
  border: 1px solid red;
top: 70px;
right: 15px;
}

亲自试一试 »

相关页面

CSS教程：CSS定位

HTML DOM 参考：位置属性

❮上一节完整的CSS参考下一节❯