HTML CSS Style Div Position Absolute

Updated on 16 Jan 2012,
Published on 02 Jul 2008

When CSS style position absolute is applied on the HTML Div tag it sets the position of Div element relative to the edges and size of web browser. Absolute CSS position style makes the targeted div to maintain the its position as per the CSS parameters such as top, bottom, left and right that moves the HTML div tag along with increasing and decreasing size of web browser. You can use the top, bottom, left and right CSS style properties with position absolute CSS property similarly as we learnt in the previous tutorial about HTML CSS Style Div Position Relative.

CSS Div Postitioning Examples:

From the following links you can view the live samples of Div Positioning styles using CSS:

Example of HTML CSS style Div Position Absolute

<html>
<head>
    <title>HTML Nested div positioning</title>
    <style type="text/css">
        .divAbsolute {
            border: solid 1px #000000;
            width: 300px;
            height: 150px;
            position: absolute;
            top: 10px;
            right: 200px;
        }
    </style>
</head>
<body>
    <div class="divAbsolute">
        HTML div tag with CSS style postion:absolute
    </div>
</body>
</html>

Above example will show the position absolute CSS style for the div positioning. top:10px and right:200px along with position:absolute will set the position of div 10px away from the top edge of web browser and 200px away from the right edge of the web browser. Copy above sample code and see the position absolute CSS style on div tag positioning.

Output:

Get the output of above discussed code from the following link:

Div Position Absolute

Continue to next tutorial: HTML Nested Div Positioning Using CSS Position Styles to learn Div positioning using CSS Position Property.

Previous Tutorial

Next Tutorial