css绝对定位怎么实现页面自适应

使用绝对定位的元素会脱离文档流，所以在实现页面自适应时需要注意以下几点：

1. 父元素需要设置相对定位（position: relative;），这样才能让子元素以父元素为基准进行定位。

2. 使用百分比来设置绝对定位元素的位置和大小，这样可以根据父元素的大小来自适应。

3. 使用@media查询根据不同的屏幕尺寸设置不同的样式，以达到页面自适应的效果。

下面是一个例子：

HTML代码：

<div class="container">
  <div class="box"></div>
</div>

CSS代码：

.container {
  position: relative;
  width: 80%;
  margin: 0 auto;
}

.box {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-color: #ccc;
}

@media screen and (max-width: 768px) {
  .box {
    width: 80%;
    height: 30%;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
  }
}

在上面的例子中，父元素 .container 设置了相对定位，并且使用了百分比来设置宽度和 margin 值，以适应不同的屏幕尺寸。子元素 .box 使用了绝对定位，并且使用了百分比来设置位置和大小，同时使用 transform 属性来居中对齐。在@media查询中，我们根据屏幕尺寸重新设置了.box的样式，以达到页面自适应的效果。