How position absolute and fixed block elements get their dimension?

by

It’s because absolute and fixed positioning removes the element from document flow.

And since those elements are removed from document flow, there is no reference for what width they should be, so they only take as much space as their content.

They are still “block” elements if they are inherently block elements (div, p, etc.), unless the display property is changed via CSS. Edit for clarity: The browser will still compute as display: block even if the display property is changed via CSS.

Here is some documentation on document flow:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow

The important part:

Taking an item out of flow

All elements are in-flow apart from:

  • floated items
  • items with position: absolute (including position: fixed which acts in the same way)
  • the root element (html)

Out of flow items create a new Block Formatting Context (BFC) and therefore everything inside them can be seen as a mini layout, separate from the rest of the page. The root element therefore is out of flow, as the container for everything in our document, and establishes the Block Formatting Context for the document.

More Related Contents:

  1. Cut Corners using CSS
  2. Change Select List Option background colour on hover
  3. What to use in place of ::ng-deep
  4. CSS Grid Layout not working in IE11 even with prefixes
  5. How to center elements on the last row in CSS Grid?
  6. Is there an equivalent to background-size: cover and contain for image elements?
  7. Using margin:auto to vertically-align a div
  8. Placing border inside of div and not on its edge
  9. CSS background image to fit width, height should auto-scale in proportion
  10. Position: absolute and parent height?
  11. Responsive CSS Trapezoid Shape
  12. How can I set the max-width of a table cell using percentages?
  13. make div’s height expand with its content
  14. CSS Background Opacity [duplicate]
  15. Flex items not respecting margins and box-sizing: border-box
  16. Why cannot change checkbox color whatever I do? [duplicate]
  17. Align the form to the center in Bootstrap 4 [duplicate]
  18. CSS for changing color of last word in h1
  19. CSS box shadow around a custom shape?
  20. floating elements are outside of containing blocks?
  21. canvas default size
  22. How to have two items on opposite sides on the same line
  23. How can I target a specific column or row in a CSS grid layout?
  24. body { overflow-x: hidden; } breaks position: sticky
  25. How to create a triangle in CSS3 using border-radius
  26. Bootstrap 3 grid, does it *really* matter how many columns are in a row?
  27. How To Add CSS3 Transition With HTML5 details/summary tag reveal?
  28. How can I make Bootstrap 4 columns all the same height? [duplicate]
  29. Changing image src depending on screen size
  30. Balanced text wrapping in HTML

Leave a Comment