position
Description
position defines the positioning scheme used to lay out an element.
| Item | Value |
|---|---|
| Initial value | static |
| Inherited | No. |
| Version | CSS2 |
| JavaScript syntax | object.style.position="absolute" |
| Applies to | All elements. |
Syntax and Property Values
position:static|absolute|fixed|relative|inherit
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.
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
body {<!-- www . j a v a2 s . c om-->
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>
The code above generates the following result.
