First the definition of CSS position Property:
“The position property places an element in a static, relative, absolute or fixed position.”
“We can also say that the CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element’s content is too big to fit in a specified area.”
CSS properties can also be dynamically changed with a JavaScript. The syntax is as follows:
object.style.position="absolute"
Example:
h1
{
position:absolute;
left:100px;
top:150px;
}
Possible Values for the “position” property:
static:
This is Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations).
Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.
#div-1 {
position:static;
}
relative:
An element with position: relative moves an element relative to its normal position, so “left:20″ adds 20 pixels to the element’s LEFT position.
Let’s move div-1 down 20 pixels, and to the left 40 pixels:
#div-1 {
position:relative;
top:20px;
left:-40px;
}
absolute:
An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties.
Let’s move div-1a to the top right of the page:
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
fixed:
An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)
An excellent online resource to further understand it is here
Another thing related to CSS positioning is : float
We can “float” an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we can use it for more complex layout tasks.
#div-1a {
float:left;
width:200px;
}
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
