css - 使用位置 :absolute,，最近定位的祖先无效

Question

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

这是因为设置 absolute只有当它的第一个祖先按照 W3Schools absolute 非静态定位时， child 才应该工作表示 该元素相对于其第一个定位(非静态)祖先元素进行定位。

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

有人能帮我理解为什么我不必为了 absolute 将父级的位置设置为某个非静态值吗？属性(property)正常工作？还是我理解 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

要记住的两个一般规则:

绝对定位元素将定位在其包含 block 内，该包含 block 由最近的定位祖先定义。但是，如果没有定位的祖先，则包含 block 是初始包含 block (即视口(viewport))。
您的 .parent div 在视口(viewport)的左上角几乎对齐。这就是为什么你的绝对定位的 child 在任何一个包含 block 中都有相似的定位。

申请时position: absolute将其从正常流程中删除。就是这样。该元素仍将被定位，就好像它在正常流中一样。直到您应用 CSS 偏移属性( left 、 right 、 top 、 bottom )才能实际定位元素。