CSS: Positioning

CSS
Basics - Backgrounds - Text - Box Model - Selectors and Combinators - Pseudo-class and Pseudo-element - Gradients - Animations and Transitions - CSS in AoPS - List of Elements

Positioning does exactly what its name implies - it positions elements.

Syntax

Positioning is usually done with the position property in conjunction with the top, bottom, left and right values. The position property states what kind of positioning you want, while the other properties (which, for the sake of laziness, will be referred to collectively as the direction properties), state where to place the element to which the position property applies to.

If either of the position or direction properties are removed from between the curly brackets, then you will see no effect.

Position property

For the position property, there are 5 possible values:

Value Description
absolute This states that the element is to be placed with respect to its first positioned (non-static) ancestor, and that it moves when you scroll.
fixed This states that the element stays in one place when you scroll.
relative This states that the element is to be placed with respect to its original position.
inherit This tells the browser to just place the element according to the parent.
static This is the default value. In everyday terms, this tells the browser to do nothing special.

Of these, CSS developers very rarely use the last two values.

Up, down, left, right. Which way should I go?

The direction properties state where the element must go.

Property Description
top Push element from the top of the webpage (screen if using position:fixed).
bottom Push element from the bottom of the webpage (screen if using position:fixed).
left Push element from the left of the webpage (screen if using position:fixed).
right Push element from the right of the webpage (screen if using position:fixed).

For the value, the most commonly used units are

Common CSS units Value
px pixels (That which has no part, except to display stuff on your screen)
em 1em is equal to the current font size. $n$em, where $n$ is a positive integer, is equal to $n$ times the current font size.
% percentage of the viewer's screen
pt point (1 pt is 1/72 of an inch, and is the same unit used in Asymptote)

Note: negative values are allowed.

When using position:absolute, these values state where the element is with respect to the webpage. So for example,

#header{
    position: absolute; 
    bottom: 5px; 
}

states that the header shall be detained 5px above the bottom of the webpage. However, if we were to use position:fixed, the same property now states that the element is to be placed 5px above the bottom of your browser screen. For position:relative, this means that the element is to be moved up 5px from its original position.

Examples

The following are examples of using positioning in CSS.

This tells the browser to put the sidebar at the top-left corner of the page. The sidebar will stay in that position when you scroll, and if you scroll far down enough it will disappear from view.

#side{
    position: absolute;
    top: 0px;
    left: 0px;
}

This tells the browser to put the navigation bar on the bottom of the browser screen. The nav-bar will then follow you wherever you go on the webpage.

#navigation_box{
    position: fixed;
    bottom: 0px;
}

Note that no left: or right: declaration is needed.

This tells the browser to move the main content -300 pixels to the left - that is, the left edge of the content is at a point 300 pixels left of the left edge of your screen:

#main{
    position: relative;
    left: -300px;
}

See Also

W3 Schools tutorial on positioning


This article is a stub. Help us out by expanding it.