如果两者都有position:absolute,那么元素及其子元素的左值和顶值是什么？

Question

我有这个html,其中元素的位置是绝对的,但left和top是auto:

<div style="position:absolute; width:100px; height:100px;">
    <span style="position:absolute;">Test child</span>
</div>

我觉得跨度的左侧和顶部将是0像素,但无法从规格或其他帖子中解读.

所以,如果我没有为绝对定位元素指定左侧和顶部,其父级也是绝对定位且没有边距或填充,则左侧和顶部将为0px,这是否正确根据css规范？

此外,在与上述相同的情况下,但在写入模式下从上到下和从左到右书写模式,顶部和右侧将是0px,对吧？

编辑:为了使它更清晰,我的意思是左边和顶部相对于父div是0px,0px.或者相当于:

<div style="position:absolute; width:100px; height:100px;">
    <span style="position:absolute;left:0px;top:0px">Test child</span>
</div>

谢谢

Answer 1

首先，您应该注意顶部、左侧、右侧和底部的初始值是auto 而不是 0。请参阅规范第 9.3.2 节

所以对于这个问题：

如果我没有指定绝对定位元素的左侧和顶部，其父级也绝对定位并且没有边距或填充，则左侧和顶部将为 0px，根据 css 规范，这是否正确？

答案是否定的，这是不正确的。在您的示例中，它恰好是正确的，因为子元素位于文档流中（即使没有任何定位）。

正如您在此示例中所看到的：

<div style="position:absolute; width:100px; height:100px;">
  Some text
  <span style="position:absolute;">Test child</span>
</div>

在这种情况下，绝对定位的唯一效果是将元素从流中取出，但它仍保留在其原始位置。