position
Description »This sets the method by which an element is positioned. |
|
Possible Values »
- position: static;
- The element is positioned according to the document order. This is the default.
- position: absolute;
- Positions the element relative to the first non-static parent.
- position: relative;
- Positions the element relative to its normal position.
- position: fixed;
- The element is positioned relative to the browser window.
- position: inherit;
- Inherits the value of the parent element.
Details »
Under default circumstances, elements are rendered in the order they appear on the document. In other words, if I had a div block followed by an image followed by a form, you would perceive the elements in this order, left to right, top to bottom. The position property allows you to be more flexible in where elements appear.
When you specify a position value other than static, the top, right, bottom, and left properties become available for use. In summary, these properties position the element according to the method used (ie. the value supplied for the position property).
The example below clarifies the differences between the different values.
In Practice »
| Results | CSS |
| Try it! | at The CSS Zone Sandbox |