CSS “position” Tutorial
Perm url with updates: http://xahlee.org/js/css_positioning.html
CSS Position: static, relative, fixed, absolute, Examples
Amazon Kindle. Read books under the sun. Review
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.
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.
CSS Position Summary
|“positon” Value||Own Layer||Relative To|
|static||no||N/A. (Normal Flow)|
|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”).|
Overlapping and z-index
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.
Not Like Photoshop Layers
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:
- In CSS, a normal HTML page is conceptually in a layer, but it doesn't have a associated z-index.
- When you use position with values of “fixed” or “absolute”, that tag lives in its own layer. However, the layer by default does not have the same dimension as the window. Its dimention is whatever its width and height according to css's rules for a tag's dimension (including inheritance).
- 2 layers can have the same z-index. The z-index isn't a unique number for layers. It's a number for each tag for specifying which is more front. If you specify 2 tags with the same z-index, latter tag is more front.
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”.