CSS Property position








position defines the positioning scheme used to lay out an element.

Summary

ItemValue
Initial value static
Inherited No.
Version CSS2
JavaScript syntax object.style.position="absolute"
Applies to All elements.




CSS Syntax

position:static|absolute|fixed|relative|inherit

Property Values

The property values are listed in the following table.

Value Description
staticThe element is laid out as normal (default value).
absolute Positioned relative to its first non-static positioned ancestor element
fixed Positioned relative to the browser window
relativePositioned relative to its normal position, "left:10px" adds 10 pixels to the element's left position
inherit Inherit the position property from the parent element

You use the top, bottom, left, and right properties to offset the element.

We can use the fixed value to make the element stay at the same location during the rest of the content scrolling up or down.





Browser compatibility

position Yes Yes Yes Yes Yes

Example

An example showing how to use position CSS property.

<!DOCTYPE HTML>
<html>
    <head>
    <style>
    body {<!--from  w  w  w.j  a va  2 s.  co m-->
        background: yellowgreen;
    }
    p {
        margin: 10px 110px;
    }
    div {
        position: absolute;
        background: yellow;
        padding: 5px;
        width: 100px;
        height: 100px;
    }
    div#top-left {
        top: 0;
        left: 0;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
    }
    
    </style>
    </head>
    <body>
        <div id='top-left'>
            Top, Left
        </div>
    </body>
</html>

Click to view the demo