Posted on Jul 23 This is a follow-up blog of this.Welcome 👋 to this blog. This blog is for beginners who just started the web development journey or professionals who just wanted to revise their CSS knowledge. We will learn the essentials of CSS. Let's get started 🚀. One more thing for this blog I have created a website which helps me for the demonstration purpose.As we have learned some important topics in the previous blog. This is a follow-up blog in which we will learn more about the CSS.The CSS layout helps you to decide where the particular Element of Html will be positioned on the webpage. This is a very important part that deals with the overall appearance of elements in a webpage.There are many CSS property, you can use for the layout purpose but in this blog, we will cover the simple one position property. For the demonstration purpose, I have created a website. If you look at the website. You can see there are some boxes with different-different colours.How those boxes are made?These are a div element of HTML. div, in simple words you can think of it box, whose default value is nothing which means no colour, no height, no width etc. I have created these divs with the help of these lines of code. HTMLCSSSimilarly, I have created three divs with different colours. Now time to learn about the position property of CSS.Static position means all the elements will follow the general flow of HTML. The general or normal flow of HTML allows the element to go into the webpage from top to bottom like thisNot like this.In the demonstration website, you will check here, how the div are stacked to each other.The HTML and CSS code is as follows.You will notice that if you remove position: static; this line then nothing will happen because this is the default behaviour of HTML.This property position: fixed; help us to fix the position of any HTML element means if you scroll the screen then the position of this element would not change like it was changing in other positioning. And the element gets out of the general flow of HTML which is from top to bottom.CSSYou can try this on the live demo.By doing this the given div goes on top of the following HTML elements. This can be fixed in many ways but we will not cover this in this blog.Note: Fixed positioning does take the element completely out of the flow of HTML. This helps us to position the element with respect to the normal flow or default flow of the HTML of that element.Notice in class .div-one we have set the position: relative; and also added some marginmargin you can relate margin by the external spacing of an element. This CSS property help to set the position of the HTML element div in this case relative to its normal position of general HTML flow. Check the live demo here.Note: Relative positioning doesn't take the element completely from the flow of HTML. This helps us to position the element with respect to the nearest parents or ancestors.Let's understand this via codeNotice we have created a parent or ancestor div with class parent and nested the remaining div as a child inside the parent. For making the position absolute we have to make the parent positioning relative and any one child or all children (depending on your requirements) positioning absolute. Let's have a look at the CSS codeNotice at .div-one we have added a CSS property right: 0px; this means the distance between the parent and the div with the position: absolute; to the right is 0px. Please have a look at the demonstration live website to relate it.Note: Absolute positioning does take the element completely out of the flow of HTML. You revised a lot of fundamentals for the CSS. Thanks for reading till the end. If you have any feedback, the comment section is yours.Till then let's grow together.CodeContact me: [email protected] LinkedIn TwitterTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Ayodeji Akintubi - Jul 22 SDS2SSSD - Jul 22 Manuel Montoya - Jul 22 Amit Gupta - Jul 22 Once suspended, ankur0904 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, ankur0904 will be able to comment and publish posts again. Once unpublished, all posts by ankur0904 will become hidden and only accessible to themselves. If ankur0904 is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Ankur Singh. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag ankur0904: ankur0904 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging ankur0904 will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.