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

我需要从流程中取出一个元素,使用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.710.6.4部分所述,并且每个浏览器都行为正常.

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

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

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

this fiddlethe original进行比较.

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

相关文章

HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环...
HTML(Hypertext Markup Language,超文本标记语言)是一种用...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以...