Menu
Css position is a property to position a element to the viewport.

Everything you need to know about css position

CSS position is a property to position an element to the viewport.

I have already created a video about it on my youtube channel. Check that out for more details.

If you like this video, please like share, and Subscribe to my channel.

To apply CSS position you need to use the position property. 4 property to manipulate the position.

  • top
  • bottom
  • left
  • right

There are 5 types of CSS positions.

Static

The static position is the default behavior. It is always positioned according to the normal flow of the page.

Note: header should be static. Sorry for my mistake.

1<h1>static</h1>
2  <div class="outer__parent">outer parent
3    <div class="parent">parent
4     <div class="children">children</div>
5    </div>
6  </div>
1* {
2    color: #fff;
3  }
4  h1 {
5    color: #000;
6    font-size: 2rem;
7    margin-bottom: 2rem;
8  }
9  .outer__parent {
10    background: #00f;
11    width: 50vw;
12    height: 50vh;
13    padding: 1rem;
14    font-size: 1.5rem;
15  }
16  .parent {
17    background: #f00;
18    height: 30vh;
19    margin-top: 1rem;
20  }
21  .children {
22    background: #0ff;
23    height: 10vh;
24    color: #000;
25    margin-top: 1rem;
26  }

Relative

The relative position is almost the same as the Static position. But you can change the position from its normal position with the 4properties mentioned above.

1.children {
2    background: #0ff;
3    height: 10vh;
4    color: #000;
5    margin-top: 1rem;
6    position: relative;
7    top: 20px;
8    left: 300px;
9  }

Absolute

Unlike the relative position, it will be positioned relative to its nearest relative parent. If it doesn't find any, then it will be positioned to document the body. It will be removed from the flow of the webpage. It will be also be scrolled with other elements.

without relative parent

1.children {
2    background: #0ff;
3    height: 10vh;
4    color: #000;
5    margin-top: 1rem;
6    position: absolute;
7    top: 20px;
8    left: 300px;
9  }

with relative parent

1.parent {
2    background: #f00;
3    height: 30vh;
4    margin-top: 1rem;
5    position: relative;
6  }
7  .children {
8    background: #0ff;
9    height: 10vh;
10    color: #000;
11    margin-top: 1rem;
12    position: absolute;
13    top: 20px;
14    left: 300px;
15  }

Fixed

fixed is similar to absolute with some difference. It will be positioned relative to the document body. It will stay fixed inside the viewport and will never be scrolled.

1.children {
2    background: #0ff;
3    height: 10vh;
4    color: #000;
5    margin-top: 1rem;
6    position: fixed;
7    top: 20px;
8    left: 15%;
9  }

Sticky

A sticky element toggles between relative and fixed. It will stay at relative first. When it will be scrolled down or up, it will meet an offset(the position that you will give). Then it turns it to fix. If the parent is passed from the viewport it will also be scrolled. If the parent is the document body. Then it will always stay fixed.

t

1.children {
2  background: #0ff;
3  height: 10vh;
4  color: #000;
5  margin-top: 1rem;
6  position: sticky;
7  top: 20px;
8}

Shameless Plug

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

Contacts

Blogs you might want to read:

Videos might you might want to watch:

Previous PostAdd a glass effect with HTML and CSS