Overflow test

This page consists of 27 tests of nested divs with different position settings. All the divs have overflow: hidden. Absolutely positioned divs are red, Relatively positioned divs are green. Staticly positioned divs are blue. Parent divs are narrower than children divs, and children divs are narrower than grandchild divs.

You may think that, since all the divs have overflow: hidden, the child and grandchild divs would be clipped to the parents, but that's not the case.

In Firefox 2, everything is clipped except for absolutely positioned divs in staticly positioned divs.

In IE7, everything is clipped except for absolutely positioned or relatively positioned divs in staticly positioned divs.

In IE8 beta 1, things are a little more complicated. Absolutely positioned divs are never clipped. Staticly positioned divs are always clipped. And relatively positioned divs are only clipped when they're a child of a clipped div.

  1. Static in static in static
  2. Absolute in static in static
  3. Relative in static in static
  4. Static in absolute in static
  5. Absolute in absolute in static
  6. Relative in absolute in static
  7. Static in relative in static
  8. Absolute in relative in static
  9. Relative in relative in static
  10. Static in static in absolute
  11. Absolute in static in absolute
  12. Relative in static in absolute
  13. Static in absolute in absolute
  14. Absolute in absolute in absolute
  15. Relative in absolute in absolute
  16. Static in relative in absolute
  17. Absolute in relative in absolute
  18. Relative in relative in absolute
  19. Static in static in relative
  20. Absolute in static in relative
  21. Relative in static in relative
  22. Static in absolute in relative
  23. Absolute in absolute in relative
  24. Relative in absolute in relative
  25. Static in relative in relative
  26. Absolute in relative in relative
  27. Relative in relative in relative