CSS: Top vs Margin-top

by

You’d use margin, if you wanted to move a (block) element away from other elements in the document flow. That means it’d push the following elements away / further down. Be aware that vertical margins of adjacent block elements collapse.

If you wanted the element to have no effect on the surrounding elements, you’d use positioning (abs., rel.) and the top, bottom, left and right settings.

With relative positioning, the element will still occupy its original space as when positioned statically. That’s why nothing happens, if you just switch from static to relative position. From there, you may then shove it across the surrounding elements.

With absolute positioning, you completely remove the element from the (static) document flow, so it will free up the space it occupied. You may then position it freely – but relative to the next best non-statically positioned element wrapped around it. If there is none, it’ll be anchored to the whole page.

More Related Contents:

  1. CSS positioning things differently between browsers [closed]
  2. How can I center an absolutely positioned element in a div?
  3. Fixed position but relative to container
  4. Why bottom:0 doesn’t work with position:sticky?
  5. Understanding z-index stacking order
  6. Difference between style = “position:absolute” and style = “position:relative”
  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. If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
  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. Set Google Maps Container DIV width and height 100%
  17. position: absolute without setting top/left/bottom/right?
  18. IE7 relative/absolute positioning bug with dynamically modified page content
  19. pure CSS multiple stacked position sticky?
  20. CSS: display:inline-block and positioning:absolute
  21. How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
  22. Targeting position:sticky elements that are currently in a ‘stuck’ state
  23. Absolute positioning ignoring padding of parent
  24. object-fit, object-positioning and absolute positioning
  25. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  26. position:fixed when left/top/right/bottom aren’t specified – desired results in FF/IE, but not in Safari
  27. position relative in firefox [duplicate]
  28. Have a fixed position div that needs to scroll if content overflows
  29. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  30. Why magin:auto is not enough to center position absolute or fixed?

Leave a Comment