如果一个元素及其子元素都具有 position:absolute，则该元素及其子元素的 left 和 top 值是多少

Question

我有这个 html，其中元素的位置是绝对的，但左侧和顶部是自动的：

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

我觉得 span 的左侧和顶部应该是 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

如果没有 parent position 设置为 relative ，并且您将 position 设置为 absolute ，这将影响您的元素从 x(0) 和 y(0) 获取位置（左上屏幕corner) ，如果你设置例如 2 divs ，第一个是 position:relative ，他的 child 是 position:absolute; , child 项将从其 parent 位置的 x(0), y(0) 受到影响。

<div style="position:absolute;">One</div> <-- this one will be on the left top of the screen ,

    <div style="position:relative;">
      <div style="position:absolute;">Here you go boy</div>
    </div>

 (this children element gets the position of its parent element , not of the top-left screen)

在你的情况下，你已经设置了两个元素（div 和 span）position:absolute，如果没有 parent 元素 position:relative; 它们会自动继续左上角并得到 left(0) top(0)。如果您希望您的 span 元素继承 div 的位置，首先您将 position:relative; 设置为您的 div 和 position:absolute；，到你的跨度，然后你必须调整你的左边和顶部像素，这取决于你的元素想要定位的位置，下面有一个简单的代码

============================================= ====

第一种情况：没有定位继承！ HTML

<div>
    <span>Test child</span>
</div>

CSS

 div{
    height:100px;
    width:100px;
    border:2px solid black;
    margin:0 auto;
}

span{
    position:absolute;
    left:0px;
    top:0px;
}

在这段代码中，我将你的 div 放在中间，(margin:0 auto)。我将 position:absolute 设置为你的跨度和 left:0 , top:0，（没有继承，因为 div 不包含 position:relative;).

=============================

第二种情况 - 继承

CSS:

div{
        height:100px;
        width:100px;
        border:2px solid black;
        margin:0 auto;
        position:relative; /* from since now , your span will be affected of div's position */
    }

    span{
        position:absolute;
        left:0px;
        top:0px;
    }

现在您的跨度受 div 的位置影响，并将放置在 div 的 x(0) 和 y(0) 角上，而不是屏幕上。我希望你明白这一点。

Answer 2

跨度默认left和top为0 我在 parent div 内部使用了 left 和 top 作为 span 你可以移除 top 和 left 来查看左上角的元素 remove

#testChild {
top:50px;
left:10px;
}

去掉这部分你肯定知道默认的left和top是0

https://jsfiddle.net/amarmagar17/op1nLep5/#

Answer 3

虽然正如@Nasco 指出的那样，如果父元素也被 position 编辑，positioned 元素指的是它的父元素，但它不一定是 relative，对于任何 positioning 都是如此，除了静态 (spec)。这会更改 top-bottom-left-right 的元素 reference，但不会更改值。

这个small fiddle表明一个带有position:absolute的元素没有任何特殊的坐标处理，即它保持流入，就好像它有position:relative;top:0;left:0;（那将是right:0; 在 RTL 设置中）。您可以在 Test2 部分中特别清楚地看到这一点。

Chrome devTools 甚至不显示计算属性的 top 或 left。

但是，position:absolute 确实有其他含义，例如忽略它的父块。无论如何都会发生这种情况，如 Test1 部分所示。

顺便说一句，你可以在上面的 link 中看到 fixed (a subcategory of absolute) 确实得到了特别的关注，显然 超出了屏幕 （ Test5Fixed) 除非给定一个 top-bottom 属性。左右作用同上 (Test3Fixed)

在规范中看不到任何关于它的信息，因此它可能取决于浏览器。

Answer 4

首先，您应该注意顶部、左侧、右侧和底部的初始值是 auto 而不是 0。参见 section 9.3.2 of the specs

那么问题来了：

if I didn't specify the left & top for absolutely positioned element whose parent is also absolutely positioned & has no margin or padding, the left and top would be 0px, Is that correct as per css specs?

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

如您在此示例中所见：

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

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

如果一个元素及其子元素都具有 position:absolute，则该元素及其子元素的 left 和 top 值是多少

What are the left and top values of an element and its child element if both have position:absolute

html

css

css-position