# Let’s Clear Up the Most Confusing Thing in CSS

I finally defeated my procrastination and sat in front of my computer to at last work on the one project I have been postponing for months: my website. I am not a web developer, but I’ve always wanted to craft my website from scratch. So I had to learn CSS.

While learning the art of making my UI look good and be more responsive, I encountered probably the most confusing thing in CSS: the `display` and `position` properties. These properties are quite useful because they make the UI elements more dynamic and responsive, so they are pretty important — but also one of the most daunting things I encountered.

To explain to you the `position` property, I will use the example below. The image below has five `<div>` blocks: The pink one has `parent` class and the others are `div1-div4` inside of it. I have not used the `position` property on any of them yet.

We will discuss each property one by one. Think of the below image and code as the default. For simplicity, instead of calling the elements `<div class=’div2’>`, I will just refer to their class name.

![This is what the below code looks like in the browser](https://cdn.hashnode.com/res/hashnode/image/upload/v1627479820806/5OiMKf-oS.png)*This is what the below code looks like in the browser*

```scss
body {
    margin: 0;
}
.parent {
    background-color: #f68787;
}
div {
    color: white;
    font-family: 'Poppins';
    font-weight: bold;
    padding: 2em;
}

.div1 {
    background-color: #743c08;
}
.div2 {
    background-color: #df760b;
}
.div3 {
    background-color: #f6b61e;
}
.div4 {
    background-color: #f8a978;
}

```

## Position

Note: All the things on a website are placed relative to other elements. The navbar is usually relative to the viewport, elements inside a div are placed relative to the div, and so on.
> Here is my [YouTube video](https://youtu.be/YmaSe-YtI5Q) on the position property.

The `position` property in CSS determines how an element is positioned on the webpage relative to other elements. The `top`, `right`, `left`, `bottom`, and `z-index` values give the position to an element with a `position` property. This property can have the following values.

### static

This is the default position for all the HTML elements. Elements with this value go with the flow of basic HTML and do not have any special privileges such as the `top`, `bottom`, `right`, `left`, or `z-index`; these are simply ignored even if you try to assign them.

```scss
.div1 {
    background-color: #743c08;
    top: 400px;
}
.div2 {
    background-color: #df760b;
    left: 400px;
}
.div3 {
    background-color: #f6b61e;
    right: 400px;
}
.div4 {
    background-color: #f8a978;
    bottom: 400px;
    z-index: -2;
}

```

The above code will have no effect because all the elements are `static` by default. So our output will look exactly like the default image.

### relative

```css
.div1 {
    background-color: #743c08;
    position: relative;
    top: 4em;
    left: 3em;
}
```

The `relative` property allows you to add `to`p, `botto`m, `right`, or `left` properties. The changes take place relative to the element as if it were `static`, i.e., the changes are made based on the element’s normal (static) position. Other elements are not affected and ignore the element with the relative property. You can use this property if you want to change the position of a particular element without affecting others.

![div1 moves relative to its static position](https://cdn.hashnode.com/res/hashnode/image/upload/v1627479823040/V3SXy0kNl.png)*div1 moves relative to its static position*

As you can see in the image, `<div1>` is `4em `away from the top and `3em` away from the left relative to its static position. All the other `divs` are not affected.

### fixed

Elements with this property go out of the flow of the document and can display on top of everything if they have a higher z-index. This property positions the element relative to the page — a more accurate word would be *viewport*** **— and other elements are not affected. This is usually used to create a navbar.

```scss
.div3 {
    background-color: #f6b61e;
    position: fixed;
    top: 300px;
    left: 400px;
    z-index: 999;
}
```

![<div3> is fixed at 300px away from top and 400px away from left](https://cdn.hashnode.com/res/hashnode/image/upload/v1627479824570/bcmj0HnbN.png)*<div3> is fixed at 300px away from top and 400px away from left*

As you can see, `<div3>` is out of its parent element and other `<div>` elements behave as if it never existed.

### absolute

This is the same as `fixed` except that the element is not positioned relative to the viewport but to the nearest element with any position value other than `static`. In simple terms, this is exactly as same as `fixed`, except now it’s relative to its nearest neighbor with a position property.

```scss
div {
    color: white;
    font-family: 'Poppins';
    font-weight: bold;
    padding: 2em;
    position: relative;
}
.div2 {
    background-color: #df760b;
    position: absolute;
    bottom: 50px;
    z-index: 9;
}
```

![This gif shows the use of absolute position in CSS](https://cdn.hashnode.com/res/hashnode/image/upload/v1627479832698/PgDlvM6zh.gif)*This gif shows the use of absolute position in CSS*

In the above gif, `<div2>` has an absolute position with `z-index: 9;` and `bottom:50px;`. Initially, the` position:relative;` part of the code in `<div>` is commented. When I uncomment it, `<div2>` is positioned 50px away from the bottom of the parent.

### sticky

The `sticky` property behaves both as `fixed` and `relative`, and switches between them depending on the scroll value. This is one of those properties which you will have to see in action to understand. It is commonly used with large lists to keep the title on top when viewing list items.

To explain this property, I have added an unordered list in the code.

```scss
div {
    color: white;
    font-family: 'Poppins';
    font-weight: bold;
    padding: 2em;
    position: sticky;
    top: 0;
}
ul {
    background-color: white;
    color: black;
    padding: 2em;
    margin: 0;
}
li {
    margin: 1em 0;
}
```

![The `stick`y property is commonly used with lists](https://cdn.hashnode.com/res/hashnode/image/upload/v1627479844660/fjlcMo0_U.plain)*The `stick`y property is commonly used with lists*

In the above code, all the `<div>` elements have `position:sticky;` with `top:0;` . This means that all the `<div>` will be relative initially but when they touch the top, they turn to fixed. This is why it appears that they are replacing each other but they are on top of each other.

## Display

The `display` property specifies how the rectangular block of an element will be rendered on the screen. Every element is a rectangle on the webpage, and this has neighboring rectangles. So put simply, the `display` property controls the width and height of an element, whether it will be displayed or not, and if it will have neighbors.

The `display` property has [many possible values](https://www.w3schools.com/cssref/pr_class_display.asp), so we will discuss the most common ones.

### inline

An element with this property can sit between other elements; they are not pushed to the next line. However, **this does not allow you to set the width or height; these are simply ignored.** `<span>` and `<a>` elements are `inline` by default.

### block

An element with a `block` value does not allow any other element next to it. It takes the entire horizontal space it can possibly take if no width is set. This is useful when you want a heading or a div to take the entire space in a line. **This is also used to give an element width and height.** `<p>`, `<div>`, `<header>` elements are `display:block` by default.

### inline-block

`inline-block` has benefits of both `inline` and `block`. With this value, you can set the width and height of an element and it stays in line with other elements. You can use this to place a div or an image between text. `<img>` is `inline-block` by default.

### none

This property makes an element disappear completely from the webpage. **The element does not become invisible; it is completely removed as if it never existed.** This is used to hide certain elements from the mobile version of the webpage to compensate for the small screen size.

I hope that now you have a solid understanding of `position` and `display` properties in CSS.