CSS Positioning

From:- https://images.app.goo.gl/QNnkCybCm9VGzVNd8

Are you also a full stack developer like me struggling with CSS code in your project? or looking for a UI developer for any css issues? if yes then reading this is worth for you. I promise I will try to make it as simple as possible and you just need basic understanding of css(what is css etc.). Let’s make our hand dirty with CSS 😊

CSS Positions are used to specify the type of positioning used for an element. There are 5 main types of CSS Positions:

• static (default)
• relative
• absolute
• fixed
• sticky

Let’s talk about all of them one by one to make it clear.

1. static: This is the default CSS position property. It will align elements in the normal flow of execution .i.e., top, bottom, left, right and z-index will not work with this css position to adjust element. If you want to adjust elements with static positioning, you can use margin and padding.
2. relative: This position property is used to adjust element with respect to its normal position. We can use top, left, right, bottom and z-index property with this position to adjust element positioning.

In the above scenario, we have 3 items in a container(green background) with some specific width and height. We have given position: relative to item-2, so that we can adjust item-2, relative to the its normal positioning. we have given top: 10px in the above scenario, which makes item-2 to starts from 10px top to its normal positioning. Get your hands dirty by using different property like bottom, left, right and z-index in the below example 👇 👇

Note: Negative values for top i.e., top: -10px is equal to bottom:10px

3. absolute: This position property is used to adjust element with respect to its closest parent’s element position(only if closest parent have position property). absolute position makes the child element to jump from its normal flow of execution .i.e., parent will assume child is not present there at all. Both parent and child should have position property to adjust the child element with respect to parent’s element position. Whichever is close to parent element will have position property, the child will be aligned with respect to that parent element.

Example 1: Basic position absolute example.

In the above case, we have given position: absolute to item-1 (first-child) because of which item-1 jump from its normal flow of execution (container(parent) assumes that item-1 doesn’t exists, that’s why it aligned rest of child(item-2 and item-3) from top which results in overlapping of item-1 and item-2). We have given top: 200px to move item-1 to 200px from top otherwise item-1 and item-2 will get overlapped (you can try removing top: 200px to see if item-2 is coming behind item-1) 👇 👇

Example 2: When immediate parent element not having position property.

In the above scenario, there is no position property on the immediate parent element(container) because of which it is considering the entire body element(entire height) as the parent and align the child element based on the body element. To make it more clear, I have given bottom: 0 to child item-1, which pushes the item out of the green container to the bottom of the main screen, because child item-1 is aligned based on body element and not with the immediate parent element(container). You can give different properties to play more with it. 👇 👇

Example 3: When immediate parent element have position property

In the above case, item-1 is placed exactly at the bottom of green container because now the immediate parent (container) is having position property and item-1 is set to bottom: 0. For making it more clear, the width and height of the green container is different than width and height of entire screen (visible via red borders). Try giving different height to container class and see how item-1 will stick to bottom of the container 👇 👇

Note: In case of position:absolute, if we don’t give width and height property to the element, then it will take just the required width and height to fit content.

4. fixed: This position property is very similar to absolute position property as this also helps you aligning the child element but with respect to view-port. Element with position:fixed will not scroll at all.

Example 1: Basic position fixed example

In the above case, we have given position: fixed to green box(fixed-container) and we used left and top property for adjusting the green box. Try to scroll it to see the fixed property in the below example.👇 👇

5. sticky: sticky property is the new property and not yet supported by many browsers. It works based on the mouse movement. As the name suggests, you can made an item stick to a position even when you scroll the page.

Example 1: Basic position sticky example

In the above example, the 3rd child item is having position: sticky and it will scroll till 50px from the top and then get sticked at the top. As this position property based on the mouse movement, so it will be easier to understand if you play with the example below. 👇 👇

That’s it about the css positioning. Please let me know if it helps you in understanding the position property or if you have any feedback about the writing. Happy Positioning 😊😊