CSS property position defines the positioning method used for an HTML element. There are five position values which are listed below.
Once the position value is set except static (the default value), HTML Elements can be positioned using the top, bottom, left and right properties in relation to the browser screen or the container that is holding the element.
HTML elements are positioned static by default. Elements with position value static are not affected by the top, bottom, left and right properties. Elements with static position value are always positioned according to the normal flow of the page.
div{
position: static;
}
HTML elements with position value relative are also positioned according to the normal flow of the page but if any of its child element has the position value absolute then such child elements can be positioned using the top, bottom, left or right value in relation to the parent element with position value set as relative. HTML elements with positon value relative can also be moved using the values left, right, top or bottom though.
div{
position: relative;
top: 30px;
}
HTML elements with position value set as fixed are positioned in relation to the viewport i.e. the browser screen. They will stay fixed in the defined areas unmoved even in case the page is scrolled. The top,bottom, left or right value can be used to set the position of such elements with relative ease.
Have a look at the bottom right corner of the page where the up arrow remains fixed even when the page is scrolled. It is designed to hide when you scroll the page to the top though.
div{
position: fixed;
bottom: 0;
right: 0;
width: 50px;
background: #333;
}
HTML elements with position value absolute are positioned relative to their parent element with position set as relative. If none of its parent element has the position value set as relative, it will be positioned relative to the viewport.
Here, the box with black background has position set as relative whereas the box with white background has position set to be absolute. Then the white box is placed to the top right corner of the black box leaving 10 pixels spacing from the top and right edge of the black box.
<div class="relative">
<div class="absolute"></div>
</div>
<style>
.relative {
position: relative;
width: 400px;
height: 200px;
background: #333;
}
.absolute {
position: absolute;
top: 10px;
right: 10px;
width: 100px;
height: 100px;
background: #fff;
}
</style>
An HTML element with position value sticky is positioned depending upon the user's scroll position. It toggles between relative and fixed positioning which changes from relative to fixed after the user reaches the defined offset scroll value in the viewport.
Sticky position is mostly used with navigation menu of a web page which is placed a little low from the top which is then set to be fixed once the user scrolls the navigation menu to reach the top of the viewport.
.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
When multiple HTML elements are positioned together, they can overlap each other and elements you want on top of the stack might appear below another element. In such cases, CSS property z-index can be used to rearrange the order of overlapped elements.
The z-index property accepts numerical value which can be either negative or positive number. The HTML element with the highest numerical value set as z-index will appear on top of the stack while the element with the lowest numerical value stays at the bottom of the pile.
.absolute{
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
Leave a comment