Question

我有这个html，其中元素的位置是绝对的，但是左和右; top是auto：

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

我觉得左派＆amp; span 的顶部为0 px，但无法从规格或其他帖子中解读。

所以，如果我没有指定左边＆amp;绝对定位元素的顶部，其父元素也是绝对定位的＆amp;没有边距或填充，左边和顶部将是0px，这是否正确按照css规范？

此外，在与上述相同的情况下，但在写作模式下从上到下＆amp;从左到右书写模式，top＆amp;右边是0px，对吧？

编辑：为了更清楚，我的意思是左边和右边。 top将相对于父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

首先，您应该注意，top，left，right和bottom的初始值是 auto而不是0 。见section 9.3.2 of the specs

所以问题是：

如果我没有指定左和右顶部绝对定位父母也绝对定位的元素＆amp;没有保证金或填充，左侧和顶部将是0px，这是正确的css 规格？

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

正如您在此示例中所见：

＆＃13;

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

＆＃13;

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

Answer 2

如果父级的位置设置为相对，并且您将位置设置为绝对，则会影响您的元素从x（0）和y（0）（左上角屏幕）获取位置，如果你设置例如2个div，第一个是position:relative，他的孩子的位置是：绝对的; ,,那个子项目将受到来自其父位置的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，如果没有position:relative;的父元素，它们会自动进入左上角并向左移动（0）顶部（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，（＆＃ 39;没有继承，因为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 3

范围的默认值为left和top为0 我在父级div中使用了左侧和顶部的跨度，您可以删除顶部和左侧以查看左上角的元素删除

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

删除此部分后，您肯定知道默认左侧和顶部为零

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

Answer 4

正如@Nasco所指出的那样，position ed元素指的是父母position编辑的父母{％}}，它不是＆＃39 ; t必须是relative，除了静态(spec)之外，对于任何position来说都是如此。这会更改top-bottom-left-right的元素引用，但不会更改值。

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

Chrome devTools甚至不会在计算属性上显示top或left。

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

顺便说一句，您可以在上面的链接中看到fixed (a subcategory of absolute)确实受到特别关注，显然已将渲染出屏幕（Test5Fixed），除非给出了一个上下属性。左右行为如上（Test3Fixed）

无法查看有关它的任何内容，因此可能与浏览器有关。

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

4 个答案: