使用位置：绝对，最近的定位祖先无效

Question

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

这是因为为子元素设置 absolute 只有当它的第一个祖先按照 W3Schools absolute 非静态定位时才应该起作用，这意味着 元素相对于它的第一个定位（不是static) 祖先元素。

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

有人可以帮助我理解为什么我不必将父级的位置设置为某个非静态值以使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;
}

Here is the JSFiddle code.

更新： 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

要记住的两条一般规则：

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

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

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

Answer 2

您忘记在您的 JSFiddle 中设置 top，所以它所做的只是与页面的左侧对齐，您的图像也是如此。在 JSFiddle 中添加 top: 0px 后，您会注意到图片确实位于页面的左上角。

下面是添加了top 和margin 将.parent 推离角落的简单演示。

.parent {
  margin: 30px;
  /* position: relative;*/
}
.child {
  display:none;
  position:absolute;
  left:0;
  top:0;
}
.parent:hover .child {
  display:initial;
}

<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>