CSS中position的例子

当然，以下是每个 position 属性值的示例：

1. static：

.static-example {
  position: static;
  /* 不设置偏移量 */
}

在这个例子中，.static-example 元素将按照正常的文档流进行布局，不会应用任何偏移。

2. relative：

<div style="background-color: #cccccc;height: 50vh">
  <span style="position: relative;top: 100px;left: 30px">哈哈哈哈哈哈</span>
</div>

显示为：

3. absolute：

<div style="background-color: #cccccc;height: 50vh">
    <span style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)">哈哈哈哈哈哈</span>
</div>

在这个例子中，.absolute-example 元素将被放置在页面的中心，通过 top: 50% 和 left: 50% 进行定位，然后通过 transform 属性将其水平和垂直居中。

4. fixed：

<div style="background-color: #cccccc;height: 50vh">
    <span style="position: fixed;top: 30px;right: 30px">哈哈哈哈哈哈</span>
</div>

在这个例子中，.fixed-example 元素将固定在页面的右上角，即使页面滚动，它也会保持在相同的位置。