CODEWITHSUNDEEP
css
Stephan van Hoof
Stephan van Hoof

Reputation: 237

CSS absolute positioned elements and margins

Am a right to conclude that a CSS margin (e.g. margin-left) influences the final position of an absolute postioned element? It seems a negative margin-left pulls it to the left (of it's absolute postion), a positive value to the right (of it's absolute postion).

Can someone explain me more about the combination absolute positioned elements and margins?

Thanks.

Upvotes: 1

Views: 340

Answers (2)

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5135

Lets understand it this way:

When you have an statically-positioned element, the element is part of the normal flow of the document. Hence, any margins applied on it are considered 'with respect to its surrounding elements'.

When you have an relatively-positioned element, the element is still part of the normal flow of the document. Hence, any margins applied on it are still considered 'with respect to its surrounding elements'.

BUT,

When you have an absolutely-positioned element, the element is taken out of the normal flow of the document. This element's positioning is now dictated by the first parent container that is not statically positioned (or the top level body element as a fallback). Hence, when you apply margin, the parent container is taken as the 'surrounding element' and the margin in calculated with 'respect to it'.

Hope this helps.

Upvotes: 1

DRD
DRD

Reputation: 5813

Correct. Margins influence where the edges of an absolutely positioned element begin.

Upvotes: 2

Related Questions