怎么使用div相对定位和绝对定位完成页面布局

使用 div 相对定位和绝对定位可以实现灵活的页面布局，具体步骤如下：

1. 在 HTML 中创建需要布局的元素，使用 div 标签包裹它们。

2. 为需要相对定位的元素添加 position: relative; 的样式，这样会将该元素的定位基准点设置为该元素本身。

3. 为需要绝对定位的元素添加 position: absolute; 的样式，并设置其 top、bottom、left、right 属性，来确定该元素相对于定位基准点的位置。

4. 可以通过设置 z-index 属性来控制绝对定位元素的层级关系。

5. 调整相对定位元素的大小和位置，以适应绝对定位元素的位置变化。

下面是一个简单的例子：

<style>
  .container {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
  }
  .box1 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 2;
  }
  .box2 {
    position: absolute;
    top: 50px;
    right: 20px;
    width: 150px;
    height: 150px;
    background-color: blue;
    z-index: 1;
  }
</style>

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

这段代码会在一个宽高为 500px 的容器中创建两个绝对定位的元素，box1 在容器的左上角，box2 在容器的右上角。由于 box1 的 z-index 值比 box2 大，所以 box1 会被显示在 box2 上面。