css中position取值(css中position用法)

CSS中的position属性用于指定元素的定位方式。position属性有四个取值：static、relative、absolute和fixed。

1. static：默认值，元素按照正常的文档流进行布局，不受top、right、bottom和left属性的影响。示例代码如下：

div {
  position: static;
}

2. relative：元素相对于其正常位置进行定位，可以通过top、right、bottom和left属性来调整元素的位置。示例代码如下：

div {
  position: relative;
  top: 20px;
  left: 30px;
}

3. absolute：元素相对于其最近的非static定位的父元素进行定位，如果不存在非static定位的父元素，则相对于文档进行定位。可以通过top、right、bottom和left属性来调整元素的位置。示例代码如下：

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

4. fixed：元素相对于浏览器窗口进行定位，不会随页面滚动而移动。可以通过top、right、bottom和left属性来调整元素的位置。示例代码如下：

div {
  position: fixed;
  top: 10px;
  right: 20px;
}

除了这四个取值，position属性还可以与z-index属性结合使用，用于控制元素的层级关系。z-index属性值越大，元素越靠前。示例代码如下：

div {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
span {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
}

需要注意的是，使用position属性时，元素的display属性不能为none。使用position属性时，元素会生成一个新的层叠上下文，可以影响其子元素的定位。