CSS Positioning (positioning)

Positioning (positioning)

CSS positioning properties allow you to position a single element. It can also put an element behind another element and specify what should happen when the content of an element is too large.

Elements can be positioned using the top, bottom, left, and right properties. However, these properties do not work unless the Position property is set first. They also have different ways of working, depending on the location method.

There are four different positioning methods.

Static positioning

The default value of the HTML element, that is, no positioning, and the element appears in the normal stream.

Statically positioned elements are unaffected by top, bottom, left, and right.

Fixed positioning

The position of the element relative to the browser window is a fixed position.

It does not move even if the window is scrolled:

Example P.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Try it»

Note: Fixed positioning needs to be described under IE7 and IE8! DOCTYPE to support it.

Fixed positioning makes the position of an element independent of the document flow and therefore does not occupy space.

Fixed positioned elements overlap with other elements.

Relative positioning

Relative positioning elements are positioned relative to their normal positions.

Example H2.pos_left
{
position:relative;
left:-20px;
}
H2.pos_right
{
position:relative;
left:20px;
}
Try it»

The content of the relative positioned elements that can be moved and the elements that overlap each other does not change the space it originally occupies.

Example H2.pos_top
{
position:relative;
top:-50px;
}
Try it»

Relative positioning elements are often used as container blocks for absolutely positioned elements.

Absolute positioning

The position of an absolutely positioned element is relative to the nearest positioned parent element, if the element has no positioned parent element, then its position is relative to

Example H2
{
Position:absolute;
left:100px;
top:150px;
}
Try it»

Absolutely positioning makes the position of an element independent of the document flow and therefore does not occupy space.

Absolutely positioned elements overlap with other elements.

Overlapping elements

Elements are positioned independently of the document flow, so they can overwrite other elements on the page

The Z-index property specifies the stacking order of an element (which element should be placed in front, or later)

An element can have a stacked order of positive or negative numbers:

Instance img
{
Position:absolute;
left:0px;
top:0px;
Z-index:-1;
}
Try it»

Elements that have a higher stacking order are always preceded by lower stacking order elements.

Note: if two anchor elements overlap, no z-index is specified, and the last element positioned in the HTML code will be displayed at the front.

More examples

Shape of the cropped element

This example shows how to set the shape of an element. The element is clipped to this shape and displayed.

How to use scroll bars to display content that overflows within an element

This example demonstrates how the overflow property creates a scrollbar that is set to fit when the content of an element is too large in the specified area.

How to set browser automatic overflow handling

This example shows how to set up a browser to automatically handle overflows.

Change cursor

This example shows how to change the cursor.

All CSS Positioning properties

The number in the CSS column indicates which CSS (CSS1 or CSS2) version defines the property.

Properties	Description	value	CSS
Bottom	Defines the offset between the margin boundary beneath the anchor element and the lower boundary of its containing block.	Auto Length % Inherit	2
Clip	Clip an absolutely positioned element	Shape Auto Inherit	2
Cursor	The display cursor moves to the specified type	Url Auto Crosshair Default Pointer Move E-resize Ne-resize Nw-resize N-resize Se-resize Sw-resize S-resize W-resize Text Wait Help	2
Left	Defines the offset between the left margin boundary of the anchored element and the left boundary of its containing block.	Auto Length % Inherit	2
Overflow	Sets what happens when the content of an element overflows its area.	Auto Hidden Scroll Visible Inherit	2
Position	Specifying the positioning type of an element	Absolute Fixed Relative Static Inherit	2
Right	Defines the offset between the right margin boundary of the anchored element and the right boundary of its containing block.	Auto Length % Inherit	2
Top	Defines the offset between the top margin boundary of an anchored element and the upper boundary of its containing block.	Auto Length % Inherit	2
Z-index	Set the stacking order of elements	Number Auto Inherit	2

CSS Positioning (positioning)