the behaviour of top: auto; bamboozles me

Question

Hi I\'m really confused about some basics with absolute positioning.

Answer 1

Using auto for top (or left) tells the browser to position an element in the exact same way it would if the element had 'position: fixed'.

This jsfiddle demonstrates what I mean: http://jsfiddle.net/kUmKW/

Try changing the value of left or top from auto to see what happens.

Answer 2

You didn't really position these elements, you just declared what type of positioning you want to use. In this case, the auto value isn't really doing anything, because the #abs element is being placed right where it normally would anyways. If you removed the top: auto; segment outright, it would have no effect on the element.

"bar" is not overlapping "foo" because you haven't positioned it to do so. It is contained within the #containingBlock element, and is placed below the block element <p> because "foo" takes up a discrete amount of space. You want to override that? Set the top or other corresponding position values. To reiterate what others have said, top:auto just positions the top of that element as high up as room permits (which is what the element would have done normally).

For future reference, the auto value is used for when a parent CSS property overrides the child element's styling. For example let's say you had more complicated code which had a rule to apply a margin to every div within #containingBlock. If you want to change that back to normal, you would include margin:auto; in your containingBlock CSS.

Answer 3

When you set position absolute (relative etc) and do not specify a new position for the element, it will be placed where it would normally stay if there was no position:absolute.

Setting it to auto is like not specifying a top position and thus it gets placed under the paragraph where it would normally stay if no special positioning was applied.

Answer 4

it's easy (J/K!), auto and 0 are not the same thing.. well I mean most times they are

auto is when the render agent (the browser) attempts to decide what you mean. in the case #1 above the render agent is smart enough to know there is a preceding element, so it allows for it

as you rightly pointed out if you explicitly tell it to go to 0 it will do what it's told

swapping the source order is the same, it's then smart enough to know there is no longer anything preceding it so auto will mean 0 in that case