Position:absolute without top/left/bottom/right values

Question

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?

Answer 1

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.

Answer 2

I would say: It depends on what you are doing with the parent element.

If you add content to the parent AND also position:absolute;top:0;left:0; to the child it want help cause the position of the parent is not set and so it remains static.

example with only added content here: fiddle child box moved down cause of content

example with position:relative; to parent and position:absolute;top:0;left:0; to child here: fiddle

#parent{
    position:relative;
    width:50%;
    margin:10% auto;
    background:gold;
    height:20%;
}
#absolute{
    position:absolute;
    background:lightgrey;
    padding:2%;
    left:0;top:0;
}