css中position定位放

position属性用于指定元素的定位方式，常见的取值有static、relative、absolute和fixed。

1、static（默认值）：元素按照正常的文档流进行布局，不受top、right、bottom和left属性的影响。

示例代码：

<div class="cdaf-4ba7-9ab3-8b9b box">Static Position</div>
<style>
.box {
  position: static;
}
</style>

2、relative：元素相对于其正常位置进行定位，通过设置top、right、bottom和left属性来调整元素的位置。相对定位不会影响其他元素的布局。

示例代码：

<div class="9ab3-8b9b-64de-2fc0 box">Relative Position</div>
<style>
.box {
  position: relative;
  top: 20px;
  left: 50px;
}
</style>

3、absolute：元素相对于其最近的非static定位的父元素进行定位，如果不存在这样的父元素，则相对于文档进行定位。通过设置top、right、bottom和left属性来调整元素的位置。绝对定位会脱离文档流，不占据原来的位置，可以覆盖其他元素。

示例代码：

<div class="64de-2fc0-c6da-cfe8 parent">
  <div class="2fc0-c6da-cfe8-321a box">Absolute Position</div>
</div>
<style>
.parent {
  position: relative;
  width: 300px;
  height: 200px;
}
.box {
  position: absolute;
  top: 50px;
  left: 100px;
}
</style>

4、fixed：元素相对于浏览器窗口进行定位，通过设置top、right、bottom和left属性来调整元素的位置。固定定位不会随页面滚动而改变位置，始终固定在指定位置。

示例代码：

<div class="cfe8-321a-e4aa-df8c box">Fixed Position</div>
<style>
.box {
  position: fixed;
  top: 20px;
  left: 50px;
}
</style>

需要注意的是，绝对定位和固定定位都会脱离文档流，因此会造成其他元素的重叠或覆盖。通过z-index属性可以调整元素的层叠顺序，数值越大，显示在越上层。

除了以上常见的定位方式，还可以结合其他属性进行更精确的定位，例如使用transform属性进行位移、使用translate属性进行平移等。

position属性用于指定元素的定位方式，常见的取值有static、relative、absolute和fixed。不同的取值会影响元素的布局方式和位置调整。绝对定位和固定定位会脱离文档流，可以通过设置top、right、bottom和left属性来调整元素的位置。可以使用z-index属性调整元素的层叠顺序。