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. em, where is a positive integer, is equal to 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.