Xah Lee, 2010-03-20, 2010-10-27
This page explains the “position” element of CSS, with examples.
The “position” element has 4 possible values: static, fixed, relative, absolute. The css positioning is difficult to understand, but they are also quite powerful.
The “position:static” is the default for all tags. If you don't specify a “position”, its default value is “static” (if it hasn't inherited anything from ancestor tags). That means, the positioning of the tag's rendered box goes with normal flow.
Use “position:relative” to adjust a tag's position relative to the parent block.
Use “top”, “bottom”, “left”, “right” to specify the offset, and “width, height” to control the size.
See: CSS “position:relative” Example.
Use “position:fixed” to specify the positioning of a element with respect to the window.
When a tag has “position:fixed”, that element goes into its own layer. The normal flow of tags will flow like that tag doesn't exist.
For some examples, see:
The “position:absolute” is a little complex. When a tag has “position:absolute”, it goes into its own layer, like “position:fixed”, but the specified offset is relative to a parent tag like “position:relative”.
To be more precise, and this is important, the offset is actually relative to the first parent tag that has a position value other than “static”. When no parent has any of “position” spec, then it is relative to the “<html>” tag. In this situation, “position:absolute” is the same as “position:fixed”.
“position:absolute” is the most useful, but also the most difficult to understand.
Example: CSS Example of Text over Image.
| “positon” Value | Own Layer | Relative To |
|---|---|---|
| static | no | N/A. (Normal Flow) |
| relative | no | parent |
| fixed | yes | window |
| absolute | yes | first parent that's one of “relative”, “fixed”, “absolute”. If none found, then it's “<html>” tag (which would be equivalent to “position:fixed”). |
When a tag goes into a layer, it may overlap with other tags, either covering them or being covered. To control this, you can use the attribute “z-index”. Like this: “z-index:3”. The number can be negative. The larger the value, the more front it is.
CSS layers is not like the layers in image editing software. In Photoshop or GIMP, you can create many layers, and by default, each layer is the same size of the original layer. Each layer has a unique number. You can control which layer(s) to show or hide.
Here's how CSS's layers behave:
It is possible to create multiple layers like image editor's layers. You just set each element to have “position:fixed”, and all with the same dimension, and all offset be 0. Then, give each element a unique z-index. Then, you can use the “visibility” attribute, with values of “hidden” or “visible”. See: CSS Layout and Layers.