The green box has dimension 100px × 100px, padding 10px. The blue bar (width 110px) should overflow at the right, and the red one (height 110px) at the bottom. The blue and the red bar have position:relative (makes IE7-/Win to work differently.)
visible:
hidden:
auto:
after
Results in IE7-/Win:
Similar overflow tests, without position:relative. Other overflow tests.
A way to get the overflow:visible effect in IE6-/Win is via an extra wrapper, with position:relative, hasLayout and enough negative margins to avoid the expansion of the main container:
To get the overflow:hidden effect with position:relative descendants in IE6-7, give position:relative to the container as well:
To get the overflow:auto effect with position:relative descendants in IE6-7, give position:relative to the container as well:
after