position

position

CSS position Property

The CSS position property is used to specify how an element gets positioned when using the offset top, right, bottom and left properties.

CSS CODE EXAMPLE

<style type="text/css">
#container { border: #999 1px dashed; height: 100px; }
#container div {
    position: absolute;
    background: #FFD5FF;
    border: #F0F 1px solid;
    padding: 10px;
    width: 20px;
    height: 20px;
}
#div1 {
    top: 20px;
    left: 20px;
}
#div2 {
    top: 40px;
    left: 40px;
}
#div3 {
    top: 60px;
    left: 60px;
}
</style>
<div id="container">
  <div id="div1">A</div>
  <div id="div2">B</div>
  <div id="div3">C</div>
</div>

Possible Values:

absolute
Allows the offset properties to apply to the element. The element will scroll with other content on the page. This setting takes the element out of its normal flow in the document.
fixed
Allows the offset properties to apply to the element. The element will NOT scroll with other content on the page. This setting takes the element out of its normal flow in the document.
relative
Allows the offset properties to apply to the element and its positioning is relative to its parent container and sibling elements.
inherit
Element will inherit the positioning of its parent.
static
Normal element positioning, is the same as specifying no position setting.

Related Material

top
right
bottom
left
float

click here to code. 

Tweet