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.

Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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

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

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 18/01/2021
3176 People Used
Only 97 Left
Rating
5.0