CSS3 > Positioning

Position in CSS3

How to set the position of the element in HTML5?


It is used to set the position of the element by using position property with values left, right, up and down. It can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element.

There are different properties

  • position:relative;
  • position:absolute;
  • position:fixed;


If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

   <p>Relative position</p>
    <div style="position:relative;left:50px;top:20px;background-color:pink;">
        Relative position</div>

In the above code snippet we have the function position:relative which adds has the left, right, top and bottom properties to define the relative position which looks like normal position



When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

<p>Absolute position</p>
    <div style="position:absolute; left:80px; top:30px; background-color:green;">
        This div has absolute positioning.


In the above code snippet we defined the position absolute by top and left properties with the background properties



Fixed positioning allows you to fix the position of an element to a particular spot on the page, regardless of scrolling. Specified coordinates will be relative to the browser window. You can use two values top and left along with the position property to move an HTML element anywhere in the HTML document.

 <p>Fixed position</p>
    <div style="position:fixed; left:80px; top:40px; background-color:red;color:white;">
       Fixed position


In the above code snippet we have defined the position as fixed with the left and top  values, position fixed is used to set the position at a particular page


Static position

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

<p>Static position</p>
    <div style="position:static; left:80px; top:40px; background-color:red;color:white;">
       Static position


In the above code snippet we have static position with the left and top values , the static position looks as normal page position


Position:relative+position absolute

If we give position:relative in one element it will positioned in relative and we set position absolute in other element it will be positioned inthe top right of the first element relative

 Views: 479 | Post Order: 125

Write for us