Code has been added to clipboard!

The Position CSS Property

Reading time 1 min
Published Aug 10, 2017
Updated Sep 27, 2019

Specifying element position

By using the position CSS property, you can define how a certain HTML element is positioned in the document:

Example
h2 {      
   position: absolute;      
   left: 100px;      
   top: 150px;   
}

The syntax for CSS position property

To define the element's position in CSS, you need to choose one out of five available values:

position: value;

The default value is static which means the position of the element depends on the flow of the document. All the available values are explained in the table below.

Property values for CSS positioning

Value Description
static The default value. The position of the element depends on the flow of the document and cannot be specified using top, bottom, left and right
absolute The position of the element is relative to the closest positioned parent or the initial container
fixed The position of the element is relative to the document and not affected by scrolling
relative The position of the element depends on the flow of the document, but can be specified using top, bottom, left and right
sticky Works like position: relative; until a specified scroll location is reached, then sticks to a fixed position

Browser support

Chrome
1+
Edge
12+
Firefox
1+
IE
4+
Opera
4+
Safari
1+

Mobile browser support

Chrome
18+
Firefox
4+
Opera
All
Safari
All
CSS3 Features
Syntax
Stylesheets
Inline
Internal
External
Children Selectors
Fonts
Colors
Gradients
Opacity / Transparency
Shadow Effects
Layout — Display
Layout — Float
Responsive Web Design — Viewport
Responsive Web Design — Grid View
Responsive Web Design — Media Queries
Responsive Web Design — Flexbox Layout
Responsive Web Design — Images
Borders
Margin
Padding
Height
Links
Lists
Tables
Navigation Bar
Images
Forms
Buttons
Box-Sizing
Code Examples
@media
border-image
box-shadow
flex-shrink
margin
opacity
position
text-align
text-transform
word-wrap