位置：绝对无上/左/下/右值 [英] Position:absolute without top/left/bottom/right values

问题描述

我需要使用 position：absolute;

$

$ b >现在如果我只是设置 position：absolute; ，而不给出任何顶/底/左/右值或给父相对位置，元素就在我想要的地方

这里是 FIDDLE

html：

 < div id =parent> 
< div id =absolute> ..绝对div ..< / div> 
< / div> 
  

CSS：

 code> #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％; 
} 
  

比较此小提示与原始。 / p>

因此，相对定位绝对定位元素的一些祖先的主要目的是指定其包含块。章节 9 和 10 具有关于元素及其包含块之间的交互的大部分细节。根据你的布局，你可能不需要放置任何其他的东西，但是如果你的布局是复杂的，你可能会发现，有一些副作用，无论你是否定位任何容器元素，以及你做的位置。我怀疑包含块的主题可以被覆盖在一个不同的问题，因为它可能很可能超出了这个范围。

I need to take an element out of the flow an am using position:absolute; for that.

Now if I just set position:absolute; without giving any top/bottom/left/right values or giving a relative position to the parent, the element sits right where I want it to be.

Here is a 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%;
}

Is there a reason not to do this?

Should I realy give the element top/left values and the parent a relative position and why?

解决方案

If you want an element to remain in its static position (where it would normally be if it were not positioned) but simply take it out of normal flow, simply specifying position: absolute is perfectly acceptable. The behavior is as described in sections 10.3.7 and 10.6.4 of the spec, and every browser behaves correctly.

You aren't required to give it any offsets if you don't want to move the element from its usual static position, and you aren't required to relatively position its parent element if you're not going to move the element anywhere since it'll remain in its static position anyway.

I just looked at your code again and noticed that you're applying percentage padding to your absposed element. You will need to relatively position the parent element if you want the percentage padding to be calculated based on the width of this parent element and not the initial containing block (where the root element resides):

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

Compare this fiddle with the original.

So, the main purpose of relatively positioning some ancestor of an absolutely-positioned element is for designating its containing block. Sections 9 and 10 have most of the gory details on the interactions between elements and their containing blocks. Depending on your layout you may not need to position anything else at all, however if your layout is complex enough you may find that there are side-effects resulting from whether or not you position any container elements, and which one you do position. I suspect the topic of containing blocks could be covered in a different question since it may very well be out of scope of this one.

这篇关于位置：绝对无上/左/下/右值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！