div绝对定位不现实

根据引用，在CSS中，可以使用绝对定位来控制元素的位置。在给div元素添加了绝对定位后，可以通过top和left属性来指定元素相对于其包含块的位置。例如，给div设置top: 60px和left: 60px，表示div相对于其包含块上边和左边各偏移了60像素。

然而，根据引用，div绝对定位的代码示例中，div2的位置分别偏移了左边和上边40个像素。这说明，div绝对定位可以灵活地调整元素的位置，使其相对于包含块进行偏移。因此，可以说div绝对定位是一种相对来说较为灵活的定位方式。

而相对定位，根据引用，可以通过设置position: relative属性来实现。相对定位的元素仍然占据文档流中的位置，但是可以通过top和left属性来使其相对于其正常位置进行偏移。相对定位不会脱离文档流，因此在相对定位下，div元素仍然保持自动换行的特性。

综上所述，div绝对定位可以实现对元素的精确控制，允许相对于包含块进行偏移，而相对定位则可以在保持元素在文档流中的同时，进行相对位置的调整。这两种定位方式都有各自的优势和适用场景，根据需要选择适当的方式来实现所需效果。

相关问题

一个居中的div 不使用绝对定位 flex定位

使用flex布局实现一个居中的div：

HTML代码：

<div class="container">
  <div class="center">这是一个居中的div</div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.center {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
}

解释：

.container 设置了 display:flex，将其变成了一个弹性容器，justify-content:center 和 align-items:center 使其内部元素在水平和垂直方向上居中。height: 100vh 设置容器高度为视口高度。

.center 是容器内部的元素，设置了宽高，背景颜色，文本居中和行高，使其显示为一个居中的div。

怎么使用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 上面。