Cascading Style Sheet 2 makes it possible to do layout and layering. This page shows some examples.
Use “position: absolute” to control the absolute positioning of a element, together with “top, bottom, left, right” to specify the offset, and “width, height” to control the size.
Use “position: relative” to make it relative to the parent block.
A element can be hidden from view with “visibility:hidden”. Also, each element has a “z-index”, whose value is a integer. If two elements overlap, the one with higher z-index will cover parts or all of the other.
Example with layers: ex_css_layers.html.
The positioning and layering features together is also used to implement the pop-up tooltips using JavaScript.
The layout can be used to implement graphical progress bar. Example: ex_css_progress_bar.html.
The layout and layering can be used to implement text or input boxes inside a image, for example, the following is one large rectangular image with a blank lower-right corner, with text overlay on top of it: ex_css_text_over_img.html.
See also:
Page created: 2005-11. © 2005 by Xah Lee.