Brush up your CSS knowledge 🚀 Part[2 of 2]

This is a follow-up blog of this.

Introduction

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.

Layout of 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.

CSS Position

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.

HTML

    <div class="div-one">
    </div>

CSS

.div-one{
    height: 200px;
    width: 200px;
    background-color: yellow;
}

Similarly, I have created three divs with different colours. Now time to learn about the position property of CSS.

Static Positioning

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 this

Element 1
Element 2
Element 3
...

Not like this.

Element 1 Element 2
Element 3
...

In the demonstration website, you will check here, how the div are stacked to each other.

The HTML and CSS code is as follows.

  <body>
    <h1>Hello world</h1>
    <div class="div-one">

    </div>
    <div class="div-two">

    </div>
    <div class="div-three">

    </div>
  </body>

.div-one{
    height: 200px;
    width: 200px;
    background-color: yellow;
    position: static;
}


.div-two{
    height: 200px;
    width: 200px;
    background-color: greenyellow;
    position: static;
}

.div-three{
    height: 200px;
    width: 200px;
    background-color: red;
    position: static;
}

You will notice that if you remove position: static; this line then nothing will happen because this is the default behaviour of HTML.

Fixed Positioning

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.
CSS

.div-one {
  height: 200px;
  width: 200px;
  background-color: yellow;
  position: fixed;
}

You 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.

Relative Positioning

This helps us to position the element with respect to the normal flow or default flow of the HTML of that element.



.div-one{
    height: 200px;
    width: 200px;
    background-color: yellow;
    position: relative;
    margin-top: 40px;
    margin-left: 40px;
}


.div-two{
    height: 200px;
    width: 200px;
    background-color: greenyellow;
}

.div-three{
    height: 200px;
    width: 200px;
    background-color: red;
}

Notice in class .div-one we have set the position: relative; and also added some margin

   margin-top: 40px;
   margin-left: 40px;

margin 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.

Absolute Positioning

This helps us to position the element with respect to the nearest parents or ancestors.

Let's understand this via code

  <body>
    <h1>Hello world</h1>
    <div class="parent">
      <div class="div-one"></div>
      <div class="div-two"></div>
      <div class="div-three"></div>
    </div>
  </body>

Notice 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 code

.parent{
    position: relative;
}

.div-one{
    height: 200px;
    width: 200px;
    background-color: yellow;
    position: absolute;
    right: 0px;
}


.div-two{
    height: 200px;
    width: 200px;
    background-color: greenyellow;
}

.div-three{
    height: 200px;
    width: 200px;
    background-color: red;
}

Notice 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.