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

Question

I need to take an element from a stream using position:absolute; for this.

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

Here is 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 any reason not to do this?

Should I give the values ​​of the top / left element and the parent the relative position and why?

Answer 1

If you want the element to remain in its static position (where it would normally be if it weren’t placed), but simply take it out of the normal flow, just indicating position: absolute is perfectly acceptable. The behavior is the same as described in sections 10.3.7 and 10.6.4 of the specification, and each browser behaves correctly.

You are not required to give it any offsets if you do not want to move the element from its usual static position, and you do not need to relatively position its parent element if you are not going to move the element anywhere, since it will still remain in the static position.

I looked at your code again and noticed that you are applying a percentage addition to your item that is excluded from the list. You will need to relatively position the parent element if you want the percentage addition to be calculated based on the width of this parent element, and not the original containing block (where the root element is located):

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

Compare this script with the original .

So, the main goal regarding the positioning of some ancestor of an absolutely positioned element is to designate its containing block. Sections 9 and 10 have most of the details about the interaction 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 quite complex, you may find that there are side effects that arise from whether you are positioning any elements of the container and what position you occupy. I suspect that the topic of containing blocks can be considered in another question, since it can be very far from the scope of this.

Answer 2

I would say: it depends on what you do with the parent element.

If you add content to the parent, as well as position:absolute;top:0;left:0; in child , he wants to help because the position of the parent is not set and therefore remains fixed.

example with content added here only: child box script moved down due to content

example with position:relative; to parent position:relative; to parent and position:absolute;top:0;left:0; to child 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; } 

Answer 3

The fact is that if you do not specify a position, this default value is static , which does not allow you to specify any offset, such as left, top ..., but if you do not need to specify an offset, since this is in your case, then it is complete. On the other hand, if you want to specify an offset, you also need to set the position to something other than static.

Answer 4

I made a test suite about "position: absolute;". ---> see this

In short:

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

the top edge of the containing block of the element set "position: absolute" without the top, right, bottom, or left margin is probably the top edge of the containing block of the row row block the element is in

 But I cannot find any relevant specifications in w3.