Style position 属性

定义和用法

position 属性设置或返回用于元素的定位方法的类型（静态、相对、绝对或固定）。

另请参阅：

CSS 教程：CSS 定位

CSS 参考手册：position 属性

实例

例子 1

将 <div> 元素的定位从相对定位更改为绝对定位：

document.getElementById("myDIV").style.position = "absolute";

亲自试一试

例子 2

使用不同的定位类型：

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

亲自试一试

例子 3

返回 <h2> 元素的定位：

alert(document.getElementById("myH2").style.position);

亲自试一试

语法

返回 position 属性：

object.style.position

设置 position 属性：

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

属性值

值 描述
static 元素按照它们咋文档流中出现的顺序呈现。默认。
absolute 元素相对于它的第一个定位的（非静态）祖先元素进行定位。
fixed 元素相对于浏览器窗口进行定位。
relative

元素相对于其正常位置进行定位。

因此 "left:20" 将元素的左侧位置增加 20 个像素。
sticky

元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在 relative 和 fixed 之间切换。

它是相对定位的，直到在视口中遇到给定的偏移位置 - 然后它“粘”在适当的位置（如 position:fixed）。

注释：不支持 IE/Edge 15 或更早版本。Safari 从 6.1 版开始支持 Webkit 前缀。
initial 将此属性设置为其默认值。请参阅 initial。
inherit 从其父元素继承此属性。请参阅 inherit。

技术细节

默认值： static
返回值： 字符串，表示元素的位置类型。
CSS 版本： CSS2

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持