我需要从流程中取出一个元素,使用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%; }
有没有理由不这样做?
我应该真正给出元素的顶部/左侧值和父级的相对位置以及为什么?
解决方法
如果你想让一个元素保持在静态位置(如果它没有定位那么通常是这样),而只是将它从正常流程中取出,只需指定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节有关于元素及其包含块之间的相互作用的大部分细节.根据您的布局,您可能根本不需要放置任何其他内容,但是如果您的布局足够复杂,您可能会发现由于您是否放置任何容器元素以及您确定哪个容器元素而产生副作用.我怀疑包含块的主题可以涵盖在一个不同的问题中,因为它很可能超出了这个范围.