Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content.

The positioning block is the viewport, a block which is an ancestor of the aqua box, so overflow:hidden does not clip the pink box which is a absolutely positioned element nested in the aqua box. You should find the pink box just below the fold.

Try These

The three boxes are nested inside each other.

Watch This


Check This

<div id="aqua">aqua     <div id="yellow">yellow         <div id="pink">pink</div>     </div> </div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).