Position in CSS3

How to set the position of the element in HTML5?

Positioning

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;

Position:relative

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

output

Position:absolute

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.
    </div>

Absolute

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

output

Position:fixed

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
    </div>

Fixed

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

output

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
    </div>

Static

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

output

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: 3644 | Post Order: 125