使用 position:absolute，最近的定位祖先不起作用

Question

我有一个父母和一个孩子的div。父级只有一张图像。子 div 有另一个图像。子图像需要出现在父图像的左上角，我想将子图像absolute的位置设置为将父图像的位置设置为某个非静态位置，例如relativeor absolute。（我也设置了left，top但让我们暂时忘记它。）

这是因为absolute子元素的设置仅在其第一个祖先以非静态方式定位时才起作用，因为根据 W3Schoolsabsolute意味着该元素相对于其第一个定位（非静态）祖先元素定位。

但是我注意到即使我没有设置父级的位置（即默认情况下它的位置将是“静态”），事件然后子图像仍然很好地定位在左上角。

有人可以帮助我理解为什么我不必将父级的位置设置为某个非静态值以使该absolute属性正常工作吗？还是我理解absolute错误？

<div class="parent">
    <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
  <div class="child">
    <img src="http://xiostorage.com/wp-content/uploads/2015/10/test.png" width="200">
  </div>
</div>

/*.parent {
  position:relative;
}*/

.child {
  display:none;
  position:absolute;
  left:0;
}
.parent:hover .child {
  display:initial;
}

这是 JSFiddle 代码。

更新： Connexo帮助更新了代码。

尝试取消position对父母的注释以解开谜团。接受的答案有更多信息。

<h1>
   Positioning test
</h1>
<div class="parent">
    <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
  <div class="child">
    <img src="http://xiostorage.com/wp-content/uploads/2015/10/test.png" width="200">
  </div>

/*
.parent {
  position:relative;
}*/

.child {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}
.parent:hover .child {
  display:initial;
}

Answer 1

要记住的两个一般规则：

• 一个绝对定位的元素将被定位在它的包含块中，该块由最近的定位祖先定义。但是，如果没有定位祖先，则包含块是初始包含块（即视口）。

  您的.parentdiv 几乎与视口的左上角对齐。这就是为什么你的绝对定位的孩子在任何一个包含块中都有类似的定位。

• 当您应用position: absolute到一个元素时，您将其从正常流程中移除。就是这样。该元素仍将被定位，就像它在正常流中一样。直到您应用 CSS 偏移属性（left、right、top、bottom），您才真正定位元素。