CSS Position Absolute and Relative with Top, Right, Bottom, Left and Center Positing

May 3rd, 2019

Nilesh Chaurasia

CSS Absolute Position Property

With the help of absolute positioning of HTML elements, we can design overlapping content. Overlapping means one HTML element over another HTML element.

By default, if you design two div elements the second div element content will be just below the first div element content, but suppose you need to place the content of second div element over the first element.

For example, you want to put some text over an image then you can position your text over the image with the help of the absolute position.

Example 1 – Absolute Position Property example to place text over an image element

<!DOCTYPE html>
<html>
    <head>
        <style>
            .absoluteDiv
            {
                position: absolute;
                top:72%;
                color: white;
                left:27%;
                text-align: center;
                width:30%;
                font-size:55px;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <img src="android.png" />
            </div>
            <div class="absoluteDiv">
                <p>Android</p>
            </div>
        </div>
    </body>
</html>

In the above code, we apply some CSS Properties to the HTML Elements and set the Absolute Position property to the HTML Elements(div).

Here the text “Android” is overlapped to the android logo image.

CSS Absolute Position Property Example to Place Text Over an Image — Fig.1 – Absolute Position Property Example to Place Text Over an Image

CSS Relative Position Property for Absolute Center

If you using the absolute positioning to the HTML Element without having the relative positioned (parent) Element than it will work with the respect of body tag. This work perfects if there is no element between the body tag and your absolute positioned element.

It is advised to make a parent element with positions relative and then you can easily place the absolute positioned element with the help of top, bottom, left and right.

Example 2 – Absolute and Relative Position with Top Property

<html>
    <head>
        <style>
            .relativeDiv
            {
                position: relative;
                width:300px;
            }
            .relativeDiv img
            {
                width:100%;
            }
            .absoluteDiv
            {
                position: absolute;
                top:40%;
                color: white;
                text-align: center;
                width:100%;
            }
        </style>
    </head>
    <body>
    <div class="relativeDiv">
        <div>
            <img src="technolgy.jpg" />
        </div>
        <div class="absoluteDiv">
            <p>We are changing the world <br />with Technology.</p>
        </div>
    </div>
    </body>
</html>

You have to create a <div> element which is positioned relative inside this <div> element you have to create 2 <div> elements in which you want the second <div> element to be positioned absolute.

In this case the second child <div> element is on top of first child <div> element.

CSS Absolute and Relative Position for Absolute Center — Fig.2 – Absolute and Relative Position Example with Top Property

CSS Position Top, Bottom, Left and Right Properties

CSS Position Top, Bottom, Left and Right Properties is used to specify the position of the HTML Element. For example if you want to placed the HTML Element to the Top than you have to apply value of the top.

Example 3 – CSS Locating Absolute Element with Relative to Parent

<!DOCTYPE html>
<html>
    <head>
        <style>
            .absoluteDiv1
            {
                position: absolute;
                top:0;
                left:5%;
                color: white;
                font-size:40px;
            }
            .absoluteDiv2
            {
                position: absolute;
                bottom: 4%;
                right: 5%;
                color: deepskyblue;
                font-size:40px;
            }
            .relativeDiv
            {
                position: relative;
                width: 375px;
            }
            .relativeDiv img
            {
                width:100%;
            }
            p
            {
                padding:0;
                margin:0;
            }
        </style>
    </head>
     
    <body>
        <div>
            <div>
                <img src="shadedcolor.jpg" />
            </div>
            <div class="absoluteDiv1">
                <p>Google</p>
            </div>
        </div>
         
        <div class="relativeDiv">
            <div>
                <img src="shadedcolor.jpg" />
            </div>
            <div class="absoluteDiv2">
                <p>Google</p>
            </div>
        </div>
    </body>
</html>

You have to create a <div> element which is positioned relative inside this <div> element you have to create 2 <div> elements in which you want the second <div> element to be positioned absolute. And apply the value of top-left and bottom-right as per the requirment.