Understanding CSS Position using Feynman Technique
Feynman Technique
A brief introduction to what is Feynman Technique. It is a method of learning which helps us to get a deeper understanding of the concept we are learning. In this method if we can learn a concept in a way that we can make a kid understand the concept we have achieved a deeper understanding on the topic.
CSS Position
Now let's get into CSS POSITION...... css position is something which looks simple , which is simple but the only thing is that once a person jumps into using it they find it very confusing. This Blog is made to simplify your learning and creation process.
Types of CSS position
Static
Relative
Absolute
Fixed
Sticky
Static
position:static
In this there is no change in position of element. This is the default view and the properties such as "top", "bottom, "left", "right", "z-index" has no effect.
Relative
position:relative
In relative positioning the position of the element is changed based on the current position of the element. Making it more simpler, consider a square located on a particular location on the screen, Now if we use left:10px the location of the square will be shifted 10 pixel towards the right side from it's actual position(the direction of movement of the element will be in the opposite direction of the property name) the same goes for "top", "bottom, "right", "z-index"
Absolute
position:absolute
In absolute positioning the element gets separated from its current position. Now when we give the properties such as "top", "bottom, "left", "right", "z-index" the element will be placed based on the position of the closest element which encloses the current element. example
<style>
.container1{
position:absolute;
top:100px;
}
.container11{
background-colour:red;
height:20px;
width:20px;
position:absolute;
top:100px;
left:100px;
}
</style>
<body>
<div class="container1">
<div class="container11">
<h1>Hello</h1>
</div>
</div>
</body>
In the above code the we know that container 11 is enclosed in container1, and container1 is enclosed inbody therefor when we applied absolute positioning on container one and property top:100px the position of container one is replaced to 100px down from the starting of the body, in the same way when container11 is absolute and the properties are top:100px and left:100px the container11 moves 100px down from container1 and 100px towards right from the leftmost margin of container1
fixed
position:fixed
In fixed position the position is based on the viewport. Making it simpler, "top", "bottom, "left", "right", "z-index" properties applied on the visual part of the webpage, example when we give top:10px left:10px the position is 10px from top of the screen and 10px towards right from the left side of the screen. In fixed positioning the block will always stay in the visual part of the web page with the position given, even when we scroll down it still stays in that position on the screen
sticky
position:sticky
In sticky position the position is applied based on the normal flow. The only change is that when we scroll down and when the element is about to change from the visual area it comes down along with the scrolling keeping the position intact as applied