![Important CSS concepts[1/5] - POSITIONS](https://cdn.hashnode.com/res/hashnode/image/upload/v1673989480243/f1174bbc-bd05-49ec-a24c-6b332f1d4568.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
Table of contents
There are 5 important topics that we are going to cover. This article is divided into 5 mentioned categories below:
1. Positions
2. Flex
3. Media Query
4. Grid
5. CSS Box Model
Positions:
This property is used to adjust the position of the element on the screen. For eg, we can have one element stick to the bottom right/left of the screen and it won't budge from its position no matter how much you scroll, like a chatbot icon. Well, this is one of the use cases. Let's see what kind of position values are there to explore.
A. Static:
The Static value is the default value of an element, even if we don't declare it.
It's the same if we use position:static or not. the elements stay there, where it was already, with no change.
B. Relative:
The relative position makes the element position editable. It means now we can move the element using properties like top, bottom, right and left. This is very similar to static positioning, except that once the positioned element has taken its place in the normal flow, you can then modify its final position.
In the above example, we can see how we changed the position of the block. Interesting thing is that the "Hello" doesn't come down as the block proceeded downwards. Also, the "This is a different block" didn't move downwards. The properties like top, bottom, etc work in the opposite direction so be careful, if we want the box to shift to the right we would want to use left: 10px, it will push the box to the right.
This means that the block maintained its relativity wrt the page, meaning, it's still occupying its original place and everything on the page won't be affected by its placement and everything will be like before. All the elements around the relative block are still in their original position. That's what the relative position means.
Use case: We can create a card which rises by 20px on hover, this can be done through relative position.
C. Absolute:
In Absolute, the element itself acts like it's out of the html flow, meaning it exists on a different dimension altogether. All the elements around it position themselves like the absolute element was never there in the HTML structure.
The absolute element kinda floats over the page, without disturbing the layout of the page.
In the above example, we can see that "one block" floats away. But one other observation also comes into mind and that is it floats away even farther than its parent element i.e. ".container".This is because it treats the <HTML> tag as the main reference point and the positioning is now being done by keeping the <HTML>tag as the reference.
This brings in an important concept: Absolute Positioning Inside Relative Positioning
In the above example, we didn't mention any kind of position of the parent ".container". in which the box resides.
So if we want to apply position: absolute to the boxes inside ".container", it will not treat ".container" as its parent and position itself by keeping the <HTML> as the reference/parent and position itself when we apply to the top, bottom, left, right.
For it to again make ".container" its reference, we have to apply position: relative to this class.
What if there is more than 1 element which has absolute positioning? Then there will be an overlap if the positioning properties are the same, as we can see below:
The element which is written below in the CSS will come to the top of the screen, this is because the files render from top to bottom. So once "#one" becomes absolute, it will float above the HTML. After this, the second statement was written for "#two" renders, therefore it will put this element on the already absolute element.
What if we want "one" on top of "two"?
Z-index is the answer!
The z-index property helps us to determine which element should be at the top of the stack. Note that the z-index only accepts unitless index values; you can't specify that you want one element to be 23 pixels up the Z-axis — it doesn't work like that. Higher values will go above lower values and it's up to you what values you use. Using values of 2 or 3 would give the same effect as values of 300 or 40000.
we can see the below example for making "one" come on top of two, by applying a greater value to the z-index.
The below positions: Fixed and Sticky show their magic it comes to scrolling-related tasks. You will soon see how!
D. Fixed:
The fixed position is like absolute positioning but with the fact that it can remain fixed on the screen even if the user keeps on scrolling, the chatbot example can be executed with the help of fixed positioning.
Another difference is that it always takes the base <HTML> as the reference even if its parent is in relative positioning.
D. Sticky:
This is a mix of relative and fixed. And it works when scrolling down, meaning the top property will only work.
The sticky element which is present anywhere on the screen will come up during scrolling and then stick to the top. Also the sticky is always relative to the main <HTLML> tag, therefore it can stick to all screen edges as well. Also, the stickiness will last till the parent element is ended and will stop sticking and then scroll upwards with the parent.