Skip to content ↓


{overflow: hidden} and {position: relative} in IE

In IE 6/7, blocks positioned absolutely (position: absolute) or relatively (position: relative) usually ignore overflow: hidden rule of their container element, and go beyond the container’s bounds.

This issue can be resolved by specifying relative positioning (position: relative) for the container itself. Following example illustrates this.

CSS:
/* child element */
#child {background: #ссс; position: relative; top: -25px; }

/* its container */
#parent {overflow: hidden; position: relative; height: 50px; }
HTML:
<div id="parent"><div id="child">example</div></div>