CSS positioning can be difficult to understand at first. Positioning changes the presentation of elements from how they appear in the flow of the HTML document. It is useful for exceptions to general layout requirements.
Often it is not necessary to specify positioning for elements and some position attributes are rarely used.
The CSS position property has 4 possible attributes: Static, Relative, Absolute and Fixed. They are illustrated below with the use of block elements. Position attributes are often used in combination with placement properties, i.e. placed so much from the top, right, bottom, or left.
The default or 'natural' position of block elements on the page.
Here the div tags are placed in the HTML one after another. They stack up in order on the page, each one beneath the previous.
For the div tags to behave this way it is usually not necessary to specify static positioning in the css.
#box-1 {
width: 150px;
}
#box-2 {
width: 150px;
}
#box-3 {
width: 150px;
}
Relative to the placement of the element within the flow of the document.
Here the div tags are placed in the HTML one after another. Box-2 has position relative and values for top and left applied.
This has moved box-2 relative from its original placement in the layout.
Other content in the flow behaves as if box-2 is in its original position.
#box-1 {
width: 150px;
}
#box-2 {
width: 150px;
position: relative;
left: 10px;
top: 10px;
}
#box-3 {
width: 150px;
}
Removes the element from the flow of content and allows it to be positioned in relation to the HTML document.
Box-3 moves up to occupy the space vacated by box-2.
Absolute positioned elements will scroll with the page.
#box-1 {
width: 150px;
}
#box-2 {
width: 150px;
position: absolute;
right: 10px;
bottom: 10px;
}
#box-3 {
width: 150px;
}
Removes elements from the flow of the HTML and allows them to be positioned anywhere.
But, unlike absolute, the position is relative to the browser window and not the HTML document.
As a result the div becomes fixed in place, i.e. it will not move with the page when scrolling.
Click
HERE
for the
fixed
positioning
example
#fixed {
width: 100%;
position: fixed;
top: 0px;
}