相关疑难解决方法(0)

我有一个父母和一个孩子的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 …