CSS position 属性
下面有更多实例。
定义和用法
position 属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
| 默认值: | static |
|---|---|
| 继承性: | no |
| 支持动画: | no. 阅读有关动画的信息 |
| 版本: | CSS2 |
| JavaScript 语法: | object.style.position="absolute" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| position | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
注释: Internet Explorer 或 Edge 15及更早版本不支持 sticky。
语法
position: static|absolute|fixed|relative|sticky|initial|inherit;
属性值
| 值 | 描述 | 试一试 |
|---|---|---|
| static | 默认值。元素按其在文档流程中的显示顺序呈现，（忽略 top, bottom, left, right 或者 z-index 声明）。 | 亲自试一试 » |
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
亲自试一试 » |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
亲自试一试 » |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
亲自试一试 » |
| sticky |
粘性定位，该定位基于用户滚动的位置。 它的行为就像 |
试一试 » |
| initial | 将此属性设置为其默认值。请参阅 initial | 亲自试一试 » |
| inherit | 从其父元素继承此属性。请参阅 inherit |
更多实例
实例
如何相对于元素的正常位置定位元素：
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
亲自试一试 »
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;
}
亲自试一试 »
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 Positioning
HTML DOM 参考手册: position 属性
