Menu
Can any one tell me the Difference between style = "position:absolute" and style = "position:relative" and how they differ in case I add it to div/span/input elements?
I am using absolute right now, but I want to explore relative as well. How will this change the positioning?
942
position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent's position and changing the layout around it.
Summary: 1. Relative is always in proportion to a whole. Absolute is the total of all existence.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
The main difference between relative and absolute positioning is that position: absolute will take a child element completely out of the normal flow of the document. And that child will be positioned in relation to the first parent element that has its own position set.
Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottom attributes.
Using the position you specify with these attributes, the element is then placed at that position within its last ancestor element which has a position attribute of anything other than static (page elements default to static when no position attribute specified), or the document body (browser viewport) if no such ancestor exists.
For example, if I had this code:
<body> <div style="position:absolute; left: 20px; top: 20px;"></div> </body> ...the <div> would be positioned 20px from the top of the browser viewport, and 20px from the left edge of same.
However, if I did something like this:
<div id="outer" style="position:relative"> <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div> </div> ...then the inner div would be positioned 20px from the top of the outer div, and 20px from the left edge of same, because the outer div isn't positioned with position:static because we've explicitly set it to use position:relative.
Relative positioning, on the other hand, is just like stating no positioning at all, but the left, right, top and bottom attributes "nudge" the element out of their normal layout. The rest of the elements on the page still get laid out as if the element was in its normal spot though.
For example, if I had this code:
<span>Span1</span> <span>Span2</span> <span>Span3</span> ...then all three <span> elements would sit next to each other without overlapping.
If I set the second <span> to use relative positioning, like this:
<span>Span1</span> <span style="position: relative; left: -5px;">Span2</span> <span>Span3</span> ...then Span2 would overlap the right side of Span1 by 5px. Span1 and Span3 would sit in exactly the same place as they did in the first example, leaving a 5px gap between the right side of Span2 and the left side of Span3.
Hope that clarifies things a bit.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
