In the last article, we learned a little bit about positions in CSS. Now in today's post let's continue learning about positions in CSS.
Let's begin...
div {
position: static;
}
div {
position: relative;
left: 40px;
}
div {
position: fixed;
left: 40px;
bottom:0;
}
div {
position: absolute;
left: 40px;
bottom:0;
}
div {
position: sticky;
top:0;
}
Let's do an example involving all of the above cases...
That' all for today. In the next part, we will learn about overflow CSS property.
Till then #keepCoding.
Let's begin...
position: static
This is the default value for position property. The elements which are Positioned with the static value are not affected by the top, bottom, left and right properties. The element with static value is positioned in the normal flow of page without any special treatment.div {
position: static;
}
position: relative
An element with a relative as the value of position property is positioned relative to its normal position. We have to set top, right, left or bottom properties of the relatively positioned element will cause to set its position relative to original position.div {
position: relative;
left: 40px;
}
position: fixed
An element with position: fixed; is positioned such that its position will not change even if the page is scrolled. The top, left, bottom and right properties are used to position the element.div {
position: fixed;
left: 40px;
bottom:0;
}
position: absolute
An element wirh position: absolute; is positioned realtive to its nearest positioned ancestor. It will be more clear when we will take an example.div {
position: absolute;
left: 40px;
bottom:0;
}
position: sticky;
An element with position: sticky; is positioned based on scroll position.div {
position: sticky;
top:0;
}
Let's do an example involving all of the above cases...
That' all for today. In the next part, we will learn about overflow CSS property.
Till then #keepCoding.
