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?

Ber

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.

Fad

always the same with your answers, I always learn something from them! +1 didn't know that important fact with the percentage padding going up to the root element... – Compressor

great, thank for pointing the padding "issue" out and giving official source. – Ber

@caramba: Haha thanks, it's comments like that that keep me motivated to answer questions :) – Fad

And of course, width/height behave the same way jsfiddle.net/webtiki/UL6tP/15 I am learning every second! – Ber

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;
}

Compressor

Nice answer too, in this case absolute positioning behaves almost like float:left; except it doesn't affect other elements flow. I though I knew a lot about absolute positioning but in fact I don't! I'm learning a lot here thx to you and @BoltClock. – Ber

Answer 3

The thing is that if you don't specify position, it's default value is static which doesn't allow you to specify any offset such as left, top... but if you don't need to specify offset, as it is in your case, then it is completly valid. On the other hand, if you want to specify offset then you also need to set position to something else than static.

Multiplicate

Thx for taking time to answer. However, you don't realy answer my question, I am not using position:static because it will affect the floww of the parent and that is what I need to avoid. – Ber

Answer 4

I have done a test suite about "position: absolute;". ---> look at this

In summary:

the left edge of the containing block of an element set 'position: absolute' without top, right, bottom or left is probably the right margin edge of its previous inline box (ignoring white space)

the top edge of the containing block of an element set 'position: absolute' without top, right, bottom or left is probably the top edge of the containing block of the line box in which the element lives

But I cannot find any relevant specifications in w3.

Eyecup