相对定位内部的相对定位是什么？

Question

我正试图在CSS的海洋中游泳，而我一直试图理解的一件事是相对/绝对定位。

据我所知，相对定位定位对象相对于其常规位置，而绝对定位定位对象相对于其最接近的relative父对象。

因此，我编写了一些CSS代码，试图帮助我理解这一点，有一件事让我感到困惑：

​

body {
  background-color: green;
}

.outerdiv {
  position: relative;
  background-color: red;
  height: 300px;
  width: 200px;
  left: 100px;
  top: 100px;
}

.innerdiv {
  position: relative;
  background-color: blue;
  height: 150px;
  width: 150px;
  left: 400px;
  display: block;
}

<div class="outerdiv">
  Outerdiv
  <div class="innerdiv">Innerdiv</div>
</div>

​

我发现，当我将innerdiv元素的位置更改为绝对值时，没有什么不同。相对定位位置不应该是相对定位位置，内部div400px位置应该在什么位置，而绝对定位位置不应该是outerdiv的内部div400px权限。

Answer 1

当您将元素的定位设置为绝对时，它将其直接的非静态父元素作为引用。在您的情况下，外部the已经是非静态的，因此将innerdiv的位置从相对于绝对更改没有任何区别。