overflow attribute

Type:"visible", "hidden"
Inherited:no
Used By:All block elements
Default:visible
See:position

If a block is absolutely positioned and larger than it's parent element, what to do with the content that "overflows" the parent elements block.

Valid values are "visible" - no clipping is done, and any overflowed content is displayed unchanged - and "hidden", where the overflowed content is clipped to fit inside it's parent.

Unlike in HTML, we don't have a clip attribute, which can be used to set the rectangle to which overflowed content is clipped. Instead, if the value is hidden it's always clipped to it's parent attribute. This was mainly used for changing the viewport on the layer in realtime (e.g. to make a scrolling list), which obviously doesn't work on a printed page.

This example prints the 100x100 rectangle in the middle of the 300x300 pixel image.

<div id="viewport" position="absolute" left="0" top="0" width="100" height="100" overflow="hidden">
  <img src="bigimage.jpg" width="300" height="300" x="-100" y="-100"/>
</div>