Question

我有一个父母和一个孩子div。家长有一张图片。儿童div有另一个图像。子图像需要出现在父图像的左上角，我想将子图像的位置设置为absolute，将父图像的位置设置为某个非静态位置，比如relative或{{1} }。（我也设置了absolute和left，但现在让我们忘掉它。）

这是因为为孩子设置top只有在其第一个祖先非静态定位时才能正常工作，因为W3Schools absolute意味着 该元素相对于其定位首先定位（非静态）祖先元素。

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

有人可以帮助我理解为什么我不必将父级的位置设置为某些非静态值以使absolute属性正常工作吗？或者我是否理解absolute的工作不正确？

absolute

Here is the JSFiddle code

更新 Connexo帮助了解更新后的代码。

尝试取消注释父母的<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; }以解开谜团。接受的答案有更多信息。

position

Answer 1

要记住两条一般规则：

绝对定位的元素将位于其包含块内，该块由最近的定位祖先定义。但是，如果没有定位祖先，则包含块是初始包含块（即视口）。

您的.parent div几乎与视口的左上角对齐。这就是为什么你的绝对定位的孩子在包含阻止的情况下会有类似的定位。
将position: absolute应用于元素时，将其从正常流程中删除。就是这样。该元素仍然会像正常流程一样定位。在您应用实际定位元素的CSS偏移属性（left，right，top，bottom）之前，不会这样做。
< / LI>

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>

使用position：absolute，最近的定位祖先无效

2 个答案: