html - Position:absolute 没有 top/left/bottom/right 值

Question

我需要使用 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%;
}

有什么理由不这样做吗？

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

Answer 1

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

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

我刚刚再次查看了您的代码，发现您正在对放弃的元素应用百分比填充。如果您希望根据此父元素的宽度而不是初始包含 block (根元素所在的位置)计算百分比填充，您将需要相对定位父元素:

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

比较 this fiddle与 the original .

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