CODEWITHSUNDEEP
htmlcss
MezzanineLearner
MezzanineLearner

Reputation: 299

Default value for top, bottom, right, left position properties

The default values of the top, bottom, left, right values of the position properties is auto, how is auto calculated by the user agent, what are those values?

Upvotes: 3

Views: 3784

Answers (1)

hidanielle
hidanielle

Reputation: 594

Take top for example, from https://developer.mozilla.org/en/docs/Web/CSS/top

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.

So, top: auto for an absolutely positioned element means whatever the position of the element currently is, and can be effected by the bottom property.

For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.

So, top: auto for a relative positioned element it means the offset from it's original position, also based on the bottom property. If both are set to auto, then it won't offset anything

This would be the same for bottom, but opposite, and then similarly for the left/right relationship.

From http://vanseodesign.com/css/auto-positioning/

The default value for the top, right, bottom and left properties is auto, which means the absolutely positioned box will appear exactly where it would have had if it wasn’t positioned. Since it’s removed from the flow it will overlap any elements in the normal flow that follow it, though.

Also of note is this:

When both top and bottom are specified, as long as height is unspecified, auto or 100%, both top and bottom distances will be respected. Otherwise, if height is constrained in any way, the top property takes precedence and the bottom property is ignored.

Upvotes: 4

Related Questions