CSS Position

The position property defines how an element will be positioned on a page.

CSS Position Property

There are four different positioning methods:

Static Positioning

A static positioned element is always positioned according to the normal flow of the page. HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, right, and z-index properties.


Relative Positioning

A relative positioned element is positioned relative to its normal position.

In relative positioning the box's position is calculated according to the normal flow. Then the box is offset from this position according to the properties top or bottom and/or
left or right.

  • p {
  •     position: relative;
  •     left: 50px;
  • }

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, it will be positioned on a page relative to the 'top-left' corner of the browser window. The box's offsets further can be specified using one or more of the properties top, right, bottom, and left.

Absolutely positioned boxes are taken out of the normal flow and have no impact on the layout of later siblings. However, it can overlap other elements depending on the z-index value. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

  • p {
  •     position: absolute;
  •     top: 100px;
  • }

Fixed Positioning

Fixed positioning is a subcategory of absolute positioning.

The only difference is, a fixed positioned box is fixed with respect to the browser's viewport and does not move when scrolled.

  • p {
  •     position: fixed;
  •     top: 50px;
  •     left: 100px;
  • }
 

Warning:IE6 doesn't support the fixed value. IE7 and IE8 support the fixed value only if a <!DOCTYPE> is specified.

 
Close

Your Feedback:

 

We will be happy if you say something.