Why does `transform` break `position: fixed`?

by

Regarding the why, a quick quote from this article by meyer:

A transformed element creates a containing block even for descendants that have been set to position: fixed. In other words, the containing block for a fixed-position descendant of a transformed element is the transformed element, not the viewport

It’s a quirky behavior that’s been around since 2011.

More Related Contents:

  1. How to place a div over a image? [closed]
  2. Setting columns in bootstrap grid
  3. Bootstrap height
  4. How can I override Bootstrap CSS styles?
  5. Table fixed header and scrollable body
  6. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  7. IE8 issue with Twitter Bootstrap 3
  8. How do I change Bootstrap 3 column order on mobile layout?
  9. Change Bootstrap tooltip color
  10. Bootstrap 3 two columns full height
  11. Bootstrap 3 collapsed menu doesn’t close on click
  12. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  13. Create a responsive navbar sidebar “drawer” in Bootstrap?
  14. 7 equal columns in bootstrap
  15. Bootstrap print CSS removes background color
  16. How do I add a margin between bootstrap columns without wrapping [duplicate]
  17. Empty vertical space between columns in Bootstrap 4
  18. Bootstrap 3: Push/pull columns only on smaller screen sizes
  19. Responsive image align center bootstrap 3
  20. How to center buttons in Twitter Bootstrap 3?
  21. Change color of bootstrap navbar on hover link?
  22. Twitter Bootstrap: Center Pills
  23. Bootstrap 3 – show collapsed navigation for all screen sizes
  24. How to make bootstrap carousel image responsive?
  25. Bootstrap – Fill fluid container between header and footer
  26. Why aren’t my bootstrap 4 columns the same height?
  27. Bootstrap 5 layout for different sizes cards – like Pinterest
  28. Right align text within Bootstrap 4 breadcrumbs
  29. Bootstrap row and col explanation
  30. Can a div have multiple classes (Twitter Bootstrap) [duplicate]

Leave a Comment