css中的定位详解

CSS中的定位可以通过position属性来实现，它有四个值：static、relative、absolute和fixed。

1. static：默认值，没有定位，元素出现在正常的流中。
2. relative：相对于其正常位置进行定位。
3. absolute：相对于最近的非static定位的父元素进行定位。
4. fixed：相对于浏览器窗口进行定位。

实例代码：

/* 静态定位 */
.static-position {
  position: static;
  /* 其他样式 */
}
 
/* 相对定位 */
.relative-position {
  position: relative;
  top: 10px; /* 向下移动10px */
  left: 20px; /* 向右移动20px */
  /* 其他样式 */
}
 
/* 绝对定位 */
.absolute-position {
  position: absolute;
  top: 50px; /* 相对于最近的非static定位父元素向下移动50px */
  right: 30px; /* 相对于最近的非static定位父元素向右移动30px */
  /* 其他样式 */
}
 
/* 固定定位 */
.fixed-position {
  position: fixed;
  bottom: 0; /* 相对于浏览器窗口底部 */
  left: 0; /* 相对于浏览器窗口左侧 */
  /* 其他样式 */
}

使用定位时，可以通过z-index属性来控制元素的堆叠顺序，数值越大，元素越靠上。