CSS Positions : Everything you must know as a web developer

  

If you are a front end web developer and want to change the positions of the HTML elements to create a stunning layout, you must know CSS positions property. If you don't know or have doubts, be ready to discover everything you must know about the CSS positions.

In this article, I am going to discuss what are the different CSS positions properties you can use and how to apply them. There are five different position values - 

1. Static

    2. Relative

     3. Absolute

4. Fixed

 5. Sticky

You can use the top, bottom, left, and right properties to position the elements. But, you must declare the value of the position property before positioning. Let's discuss each property with examples.

Static:

Every HTML elements have a default position value to static. You can not change the position of an element having a static position using top, left, right, and bottom property. Its position is determined by the normal flow of the web page. I am not adding any examples as every HTML element is static.

Relative:

You can make an HTML element relative to its original position setting the position property to relative. Then, you can use the top, left, right, and bottom property for positioning the element. It will change only the position of the element to which the property is applied and other elements position will not change. You can understand it completely if you check the following link given below.

See the Pen relative by KAMAL DAS(@daskamal)on CodePen.

Here, in the example, you can find that I have used two divs and the yellow-colored div has the static position and red-colored div has relative position and the div with a static position does not change its position instead of the two divs overlap. Now, you must have the idea of using the top, right, bottom, and left properties. Have you noticed that I set the value of the bottom property for uplifting the red div? Actually, if you change the position of any element, you have to think of a relative position. If you want to change the position of the element to a top position than its original position, you will have to set the bottom value. It is the same for any other properties like left, right or top. If you want your element to be placed more right from before you have to set its left property. 

Absolute:

Now, let's discuss the absolute position. If you set the position property to absolute, the element will be out of the flow of the page and no space will be set for that element. If you add another div or text after an element having absolute position, you will find what I want to mean. Now, you should know the difference in setting position with top, left etc between relative and absolute position. You have learned about relative position and how you can set its position relative to its original position. But, in case of absolute position, the value of top, left, etc position changes the position of the element with respect to its parent div ( in case of no parent div, it is positioned with respect to the web page). You can better understand by example. So, check the code given below.

See the Pen absolute by KAMAL DAS (@daskamal)on CodePen.

Fixed:

If you are creating a website and want to have a fixed navigation bar that remains at the same place even on scrolling, you have to set the position property to fixed. You can take a look at the code to understand how it works.

See the Pen fixed by KAMAL DAS (@daskamal)on CodePen.

Sticky:

The sticky position of an element depends on the scroll position. You must specify the position using the top or left or right or bottom property for sticky position to work. Check the following example for understanding the sticky position property.

See the Pen ExKWBVp by KAMAL DAS (@daskamal)on CodePen.

Z-index: 

I want to discuss another property of CSS in this context. You might have noticed that if in the example of relative position that the two overlap and it was the second element on top of the first one. But, how can you change it and make the first one on the top and the last one at the bottom ? The z-index property does this job for you. You have to set higher the z-index value to the element which one you want on top. Find the following example for understanding how it works.

See the Pen z-index by KAMAL DAS (@daskamal)on CodePen.

To understand CSS positions property completely, you should make your hands dirty with some coding practice. You have already learned a lot of things and use this knowledge in your next project. If you have any doubts or find anything wrong, feel free to contact me. If you like this article, please share and comment so that other students can take help from this.

Happy coding 😄.