位置:绝对没有顶部/左侧/底部/右侧值

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节所述,并且每个浏览器的行为都正确.

如果您不想将元​​素从其通常的静态位置移动,则不需要给它任何偏移量,如果您不打算将元素移动到任何位置,则不需要相对定位其父元素.无论如何它都会保持静止状态.

我只是再次看了你的代码并注意到你正在对你的absposed元素应用百分比填充.你将需要,如果你想在此基础上的父元素的宽度,而不是含初始块(其中根元素所在的)来计算的百分比填充的父元素相对定位:

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

将这个小提琴与原作相提并论.

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