CSS Property position
position defines the positioning scheme used to lay out an element.
Summary
| Item | Value |
|---|---|
| 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 |
|---|---|
| static | The 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 |
| relative | Positioned 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>