Difference between style = “position:absolute” and style = “position:relative”

by

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.

More Related Contents:

  1. CSS positioning things differently between browsers [closed]
  2. Why can’t an element with a z-index value cover its child?
  3. How can I center an absolutely positioned element in a div?
  4. Fixed position but relative to container
  5. Why bottom:0 doesn’t work with position:sticky?
  6. Understanding z-index stacking order
  7. Make div stay at bottom of page’s content all the time even when there are scrollbars
  8. Why does applying a CSS-Filter on the parent break the child positioning?
  9. Center a position:fixed element
  10. My position: sticky element isn’t sticky when using flexbox
  11. Why does `overflow:hidden` prevent `position:sticky` from working?
  12. How to make fixed header table inside scrollable div?
  13. What are `scrolling boxes`?
  14. Fixed sidebar navigation in fluid twitter bootstrap 2.0
  15. What are the default top, left, botton or right values when position:absolute is used?
  16. Difference between static and relative positioning
  17. Set Google Maps Container DIV width and height 100%
  18. position: absolute without setting top/left/bottom/right?
  19. CSS: Top vs Margin-top
  20. pure CSS multiple stacked position sticky?
  21. CSS: display:inline-block and positioning:absolute
  22. How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
  23. Targeting position:sticky elements that are currently in a ‘stuck’ state
  24. Absolute positioning ignoring padding of parent
  25. object-fit, object-positioning and absolute positioning
  26. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  27. position:fixed when left/top/right/bottom aren’t specified – desired results in FF/IE, but not in Safari
  28. position relative in firefox [duplicate]
  29. Have a fixed position div that needs to scroll if content overflows
  30. Why magin:auto is not enough to center position absolute or fixed?

Leave a Comment