Brush up your CSS knowledge 🚀 Part[2 of 2]
Tags: webdev, beginners, programming, tutorial
Published: 2023-07-23 07:19:24

This is a follow-up blog of [this](https://dev.to/ankur0904/brush-up-your-css-knowledge-part1-of-2-5711).
## 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](https://ankur0904.github.io/blog-1/CSS-II/main.html) which helps me for the demonstration purpose.

As we have learned some important topics in the previous blog. This is a follow-up [blog](https://dev.to/ankur0904/brush-up-your-css-knowledge-part1-of-2-5711) 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](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout) **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](https://ankur0904.github.io/blog-1/CSS-II/main.html). 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**
```HTML
    <div class="div-one">
    </div>
``` 

**CSS**
```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](https://ankur0904.github.io/blog-1/CSS-II/main-flow.html)
```HTML
Element 1
Element 2
Element 3
...
```
**Not** like this.
```HTML
Element 1 Element 2
Element 3
...
```
In the demonstration website, you will check [here](https://ankur0904.github.io/blog-1/CSS-II/main.html), how the div are stacked to each other.

The **HTML** and **CSS** code is as follows.

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

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

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

    </div>
  </body>
```


```CSS
.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**
```CSS
.div-one {
  height: 200px;
  width: 200px;
  background-color: yellow;
  position: fixed;
}
```
You can try this on the live [demo](https://ankur0904.github.io/blog-1/CSS-II/main-fixed.html).
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.

```CSS


.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
```CSS
   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](https://ankur0904.github.io/blog-1/CSS-II/main-relative.html).


**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 
```HTML
  <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

```CSS
.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](https://ankur0904.github.io/blog-1/CSS-II/main-absolute.html) website to relate it.

**Note:** Absolute positioning does take the element completely out of the flow of HTML. 


## You got it 🤩
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.
[Code](https://github.com/ankur0904/blog-1/tree/main/CSS-II)


Contact me: ankursingh91002@gmail.com 
            [LinkedIn](https://www.linkedin.com/in/ankur-singh-161458227/)
            [Twitter](https://twitter.com/ankursingh91002)