In CSS we have mainly four types of positioning.
Static positioning is the default positioning value when it comes to browser element positioning behavior.
Attaching the fixed value of the position attribute to an HTML element, you will get a "floating" box compared to the other element on the page. You will have an unmovable object on the page even if you scroll with your mouse. Using the fixed value, the elements can overlap each other. All the others elements will ignore the fixed one.
CSS.fixed_position {
position:fixed;
top:25px;
right:10px;
}Internet Explorer will render this attribute only if there is !DOCTYPE declaration at the beginning of the HTML document.
Relative positioning refers to a different position compared to the initial static position
CSS.relativa_positioning {
position:relative;
left:15px;
top:30px;
}The values of top or left, can also be negative.
CSS.relativa_positioning{
position:relative;
left:-15px;
top:-30px;
}Using relative positioning you can also overlap elements and create awesome layouts.
HTML<style type="text/css">
.overlap_element {
position:relative;
top:-20px;
}
</style>
<h2>This element has a static positioning</h2>
<h2 class="overlap_element">The title will be in upper position compared to the initial positioning</h2>
<p><strong>Note:</strong> You can see that the space that correspond to the original positioning will be preserved</p>Many time the relative positioning of a container are often used as a container for absolute positioning for other containers or elements.
Absolute positioned elements will be positioned depending on the first non-static element. If a non-static element is not found, the browser will automatically consider HTML tag as one.
The space reserved for the absolute positioned elements will not be preserved. All other elements will act as the element doesn't exist. You can use this default behavior and easily overlap elements on-page.
CSSp {
position:absolute;
left:200px;
top:200px;
}You can use CSS positioning to overlap two or more elements.
We will use z-index to set the order of the items. The z-index property can have both positive and negative values.
HTML<html>
<head>
<style type="text/css">
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h3>Overlapping various elements with CSS</h3>
<img src="image.jpg" width="100" height="100" />
<p>We will use z-index to set the items order. The z-index property can have both positive and negative values.</p>
</body>
</html>Like you can see the image "z-index" has a value of -1. Because of that, the image will be placed below the text. We can conclude here that the element with the bigger "z-index" will be placed in front of the element with the smaller "z-index".