- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
MonsterONE Subscrioption
CSS. Positioning elements
December 28, 2011
This tutorial will help you learn CSS position properly.
Position property is usually used to put the element to the required place on the screen. Let’s see what options we have.
Static
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.
There is no need to specify static position in the CSS file unless you need to reset other position value that has been set before.
div.a{
position:static;
}
Relative
A relative positioned element is positioned relative to its normal position. You can affect the position of the element using the “top” and “left” properties.
div.b{
position:relative;
top:20px;
left:20px;
}
The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Relatively positioned elements are usually used as parent blocks for the absolutely positioned ones.
Absolute
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>
div.c{
position: absolute;
top:20px;
left:20px;
}
The following image displays the behavior of the div with the “c” class and absolute position in case it is placed within the div with class “b” and relative position
<div class="b"> <div class="c"></div> </div>
Below you can see the case when the absolutely positioned element doesn’t have any relatively positioned one.
Fixed
An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled
div.c{
position: fixed;
top:20px;
left:20px;
}
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
You can learn more about the elements positioning from the following article
Don’t forget to review our Bootstrap Admin Themes based and find out more about CSS functionality.
