CSS “position” Tutorial

Perm url with updates: http://xahlee.org/js/css_positioning.html

CSS Position: static, relative, fixed, absolute, Examples

Xah Recommends:
Kindle
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.

position:static

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.

position:relative

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.

position:fixed

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:

position:absolute

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” ValueOwn LayerRelative To
staticnoN/A. (Normal Flow)
relativenoparent
fixedyeswindow
absoluteyesfirst 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”.

Was this page useful? If so, please do donate $3, thank you donors!

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs