What are the default top, left, botton or right values when position:absolute is used?

by

As you suspect, the initial values for all these properties is not 0; it is auto. You can find their property definitions in section 9.3.2 of the spec.

When an absolutely positioned box keeps all its offsets auto (i.e. you don’t modify them), it doesn’t go anywhere. It remains in the static position, which basically means its usual spot in the layout had it not been positioned at all. Section 10 has all the details (it even has entire paragraphs explaining what “static position” means), but you’ll want to focus on 10.3.7:

The constraint that determines the used values for these elements is:

‘left’ + ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ + ‘right’ = width of containing block

If all three of ‘left’, ‘width’, and ‘right’ are ‘auto’: First set any ‘auto’ values for ‘margin-left’ and ‘margin-right’ to 0. Then, if the ‘direction’ property of the element establishing the static-position containing block is ‘ltr’ set ‘left’ to the static position and apply rule number three below; otherwise, set ‘right’ to the static position and apply rule number one below.

[…]

1. ‘left’ and ‘width’ are ‘auto’ and ‘right’ is not ‘auto’, then the width is shrink-to-fit. Then solve for ‘left’

And 10.6.4:

For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:

‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = height of containing block

If all three of ‘top’, ‘height’, and ‘bottom’ are auto, set ‘top’ to the static position and apply rule number three below.

[…]

3. ‘height’ and ‘bottom’ are ‘auto’ and ‘top’ is not ‘auto’, then the height is based on the content per 10.6.7, set ‘auto’ values for ‘margin-top’ and ‘margin-bottom’ to 0, and solve for ‘bottom’

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. Difference between style = “position:absolute” and style = “position:relative”
  8. Make div stay at bottom of page’s content all the time even when there are scrollbars
  9. Why does applying a CSS-Filter on the parent break the child positioning?
  10. Center a position:fixed element
  11. My position: sticky element isn’t sticky when using flexbox
  12. Why does `overflow:hidden` prevent `position:sticky` from working?
  13. How to make fixed header table inside scrollable div?
  14. If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
  15. What are `scrolling boxes`?
  16. Fixed sidebar navigation in fluid twitter bootstrap 2.0
  17. Difference between static and relative positioning
  18. CSS: Top vs Margin-top
  19. IE7 relative/absolute positioning bug with dynamically modified page content
  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. 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