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.
position:absolute is the most useful, but also the most difficult to understand.
Example: CSS Example of Text over Image.
| “position” Value | Own Layer | Relative To |
|---|---|---|
| static | no | N/A. (Normal Flow) |
| relative | no | parent |
| fixed | yes | window |
| absolute | yes | first parent that's not positioned “static”. If none found, then it's <html> tag. |
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 it is on top.
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 ＆ Layers.