CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS position property



The CSS position property is use to set position(like static, absolute etc..) an element.

The CSS position refer to the allow to set postion elements. You can set specify elements position relative, natural position, and absolute base position.

Property Values


Properties Value Description
Syntax position:value;
value   absolute
  relative
  fixed
  static
  inherit
Allow to All elements
Inherited No

CSS Relative Positioning

Relative positioning in CSS you use position:relative; followed by the relative offset from top, right, bottom or left. Relative position is each elements related properties(like margin, background color etc..).

Example Code:

<div style="position:relative;left:120px;background-color:orange;
width:120px;">This division part has relative positioning for each
elements.</div>
Online Try This Code Your Self....   »

Example Result:

This division part has relative positioning for each elements.

CSS Absolute Positioning

Absolute positioning in CSS you use position:absolute; followed by the absolute offset from top, right, bottom or left. Absolute position is each elements related properties(like margin, background color etc..).

Example Code:

<div style="position:absolute;top:35px;left:120px;background-color:
orange;">This division part has relative positioning for each elements.
</div>
Online Try This Code Your Self....   »

CSS Fixed Positioning

Fixed positioning in CSS you use position:fixed; followed by the fixed offset from top, right, bottom or left. Fixed position is each elements fixed properties(like margin, background color etc..).

Example Code:

<div style="position:fixed;top:35px;float:right;background-color:
orange;">This division part has fixed positioning for each elements.
</div>
<div style="width:400px; height:1400px; background-color:#FFCCCC"> 
This example is Fixed Elements display.
</div>
Online Try This Code Your Self....   »