位置：没有上/左/下/右值的绝对值答案

【问题标题】：Position:absolute without top/left/bottom/right values位置：没有上/左/下/右值的绝对值
【发布时间】：2014-06-01 18:10:01
【问题描述】：

我需要使用 position:absolute; 从流程中取出一个元素。

现在，如果我只设置 position:absolute; 而不给出任何顶部/底部/左侧/右侧值或给父级的相对位置，则该元素位于我想要的位置。

这是一个FIDDLE

html：

<div id="parent">
    <div id="absolute">.. Absolute div ..</div>
</div>

CSS：

#parent{
    width:50%;
    margin:10% auto;
    background:gold;
    height:20%;
}
#absolute{
    position:absolute;
    background:lightgrey;
    padding:2%;
}

有理由不这样做吗？

我真的应该给元素顶部/左侧值和父元素一个相对位置吗？为什么？

【问题讨论】：

标签： html css position css-position

【解决方案1】：

如果你想让一个元素保持在它的静态位置（如果它没有被定位，它通常会在这个位置）但只是简单地将它从正常流中取出，简单地指定position: absolute 是完全可以接受的。该行为如规范的10.3.7 和10.6.4 部分所述，并且每个浏览器的行为都正确。

如果你不想将元素从它通常的静态位置移动，你不需要给它任何偏移量，~~如果你不去，你不需要相对定位它的父元素将元素移动到任何地方，因为它无论如何都会保持在其静态位置。~~

我刚刚再次查看了您的代码，并注意到您正在将百分比填充应用于您的 absposed 元素。如果您希望根据父元素的宽度而不是初始包含块（根元素所在的位置）计算填充百分比，您将需要相对定位父元素：

#parent{
    position:relative;
    width:50%;
    margin:10% auto;
    background:gold;
    height:20%;
}

比较 this fiddle 和 the original。

因此，相对定位绝对定位元素的某些祖先的主要目的是指定其包含块。 9 和 10 部分有关于元素及其包含块之间交互的大部分血腥细节。根据您的布局，您可能根本不需要放置其他任何东西，但是如果您的布局足够复杂，您可能会发现是否放置任何容器元素以及放置哪个容器元素都会产生副作用。我怀疑包含块的主题可能会在另一个问题中讨论，因为它很可能超出了这个问题的范围。

【讨论】：

总是和你的答案一样，我总是从他们身上学到一些东西！ +1 不知道这个重要的事实，百分比填充到根元素...
很好，感谢您指出填充“问题”并提供官方来源。
@caramba：哈哈，谢谢，正是这样的 cmets 让我有动力回答问题 :)
当然，宽度/高度的行为方式相同jsfiddle.net/webtiki/UL6tP/15我每秒钟都在学习！

【解决方案2】：

问题是，如果你不指定位置，它的默认值是static，它不允许你指定任何偏移量，例如左、上……但是如果你不需要指定偏移量，就像你的情况一样，那么它是完全有效的。另一方面，如果要指定偏移量，则还需要将位置设置为静态以外的其他值。

【讨论】：

感谢您花时间回答。但是，您并没有真正回答我的问题，我没有使用 position:static 因为它会影响父级的流程，这是我需要避免的。

【解决方案3】：

我会说：这取决于您对父元素所做的事情。

如果您将内容添加到父级并将 position:absolute;top:0;left:0; 添加到 child 它需要帮助，因为父级的位置未设置，因此它保持静态。

此处仅添加内容的示例：fiddle child box moved down cause of content

position:relative; to parent 和 position:absolute;top:0;left:0; to child 的示例如下： fiddle

#parent{
    position:relative;
    width:50%;
    margin:10% auto;
    background:gold;
    height:20%;
}
#absolute{
    position:absolute;
    background:lightgrey;
    padding:2%;
    left:0;top:0;
}

【讨论】：

很好的答案，在这种情况下，绝对定位的行为几乎与float:left; 相似，只是它不影响其他元素的流动。我虽然知道很多关于绝对定位的知识，但实际上我不知道！感谢您和@BoltClock，我在这里学到了很多东西。

【解决方案4】：

我已经完成了一个关于“位置：绝对；”的测试套件。 ---> 看this

总结：

元素集'position: absolute'的包含块的左边缘没有顶部，右侧，底部或左侧可能是其前一个内联框的右边距边缘（忽略空白）

没有top、right、bottom或left的元素集'position: absolute'的包含块的上边缘可能是该元素所在行框的包含块的上边缘

But I cannot find any relevant specifications in w3.

【讨论】：