What is Position Property in CSS?
CSS Position property allows you to position the elements at certain place in an HTML Document, i.e; in top, right, bottom and left directions.
There are **5 ** types of position properties in CSS , they are
static
relative
absolute
fixed
sticky
Let's now see what the above properties are and how do they work:
1. static
The static property is the default position property of all HTML elements. It does move(position) the elements in any directions instead will be laid in i'ts own position in HTML document.
*Syntax: *
selector {
position: static;
}
Example:
In the above shown example we have a background container with dark color and also have a box with yellow color. If we notice the above shown example the yellow color box was stayed on it'w own position although we have given it the postion of static. The above example demostrates that the Static position property has nothing to do with changing of element's position.
2. relative
The relative property is also another position property of CSS. An element with position: relative; is positioned relative to its normal position. It does not wrap around your head right!?
Let's see how does it work,
*Syntax: *
selector {
position: relative;
}
Example :
If we see the above given examle it looks same as the example showed in static - position but with one change of box color. In the static position we had a box with color of "yellow", whereas here in this relative - position example the box has a color of * "cyan"*. If we carefully notice in this relative - position example the box has moved below and to right side from its original position which is** top - left** side. Oh!😮 why its happening like this...
Let me clarify it for you, in this example of demonstration we have given to the box ** ** position: relative along with that we also gave top: 50px; left: 50px;which causes the box to move 50px downwards and 50px to the right side. Looks cool right😉.
Play a little bit with it, so that it will be wrap around your head🙂.
3. absolute
Unlike relative position, the position: absolute; property position an element relative to to its parent elements position. If there is no position property set to the parent element, it uses the document body. So in-order to postion the element according to its parent element, we should need to give the parent element of property positon: relative;
Let's demonstrate it,
*Syntax: *
selector {
position: absolute;
}
Example :
The above example demonstrates the position: abolute property. If we notice the above shown example, we have a container and a box in it with color of "orange" has given to it. There, we have also given *postion: relative; * property to the container element which is parent element of the box element. we have given position: absolute; property to the box element, we also given *bottom: 50px; , right: 50px; * properties to the box, whch causes to move the box relative to the container which is its parent element, now the box has moved 50px bottom and 50px right to relative to the container element.
I Hope its gave an idea about absolute position property in CSS.
Note : The above mentioned two position properties are mainly used for positioning images and some other elements at certain place in an HTML Document.
4. fixed :
An element with position: fixed; property is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. We can also use top, right, bottom, left propeties to position the element.
*Syntax : *
selector {
position: fixed;
}
Example :
In the above shown example, we some headings, paragraphs with random text and a box with color of blue. we have given position:fixed; to the box, along with the properties of top: 50px; right: 50px; which makes the box aligned to the top right corner of the page with gap of 50px. To elaborate the blue color box is fixed to the top - right corner to the page which means it wouldn't be moved any where at any cost, even the page is scrolled.
Play with the code to be more clear about fixed position property.
5. sticky :
An element with **position: sticky; ** is positioned based on the user's scroll position. It is the combination of both relative and fixed positions.
Let's try to demonstrate it,
*Syntax : *
selector {
position: sticky;
}
Example :
The above example have some headings, some paragraphs with random text and a box with color of *"purple" *. We have given the position: sticky property to the box also have given top: 100px; When we scroll the page we can notice that the box moves up along with scroll and get sticked at the top of the page with gap of 100px at certain point. Yeah! this how the position: sticky; property behaves.
First of all, it will be positioned on it's own place, when the page scrolls it will start moving to the direction in top, right, bottom and left directions relative to the viewport(we can say that , it obeys to the relative position) to which values are given to it as it reaches to that point on page it wiil get fixed there(we can say that , it also obeys to the fixed position).
Note: The CSS
position: sticky;property is used for making navigation bars in websites. you will often come across to see the type of navbars which will stick on to the top of the webpage at certain point when scrolling up.
Yeah! :)
This is all about positions in CSS
I hope, you can now have an idea about CSS Position Properties
Thanks for reading the article upto here..
