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.

Alt Text

<h1>static</h1>
<div class="outer__parent">outer parent
<div class="parent">parent
<div class="children">children</div>
</div>
</div>
* {
color: #fff;
}
h1 {
color: #000;
font-size: 2rem;
margin-bottom: 2rem;
}
.outer__parent {
background: #00f;
width: 50vw;
height: 50vh;
padding: 1rem;
font-size: 1.5rem;
}
.parent {
background: #f00;
height: 30vh;
margin-top: 1rem;
}
.children {
background: #0ff;
height: 10vh;
color: #000;
margin-top: 1rem;
}

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.

Alt Text

.children {
background: #0ff;
height: 10vh;
color: #000;
margin-top: 1rem;
position: relative;
top: 20px;
left: 300px;
}

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.

Alt Text

without relative parent

.children {
background: #0ff;
height: 10vh;
color: #000;
margin-top: 1rem;
position: absolute;
top: 20px;
left: 300px;
}

Alt Text

with relative parent

.parent {
background: #f00;
height: 30vh;
margin-top: 1rem;
position: relative;
}
.children {
background: #0ff;
height: 10vh;
color: #000;
margin-top: 1rem;
position: absolute;
top: 20px;
left: 300px;
}

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.

Alt Text

.children {
background: #0ff;
height: 10vh;
color: #000;
margin-top: 1rem;
position: fixed;
top: 20px;
left: 15%;
}

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.

Alt Textt

.children {
background: #0ff;
height: 10vh;
color: #000;
margin-top: 1rem;
position: sticky;
top: 20px;
}

Shameless Plug

I have made a video about how to build a carousel postcard with React, Material-UI, and Swiper.js. If you are interested you can check the video.

You can also demo the application form here

Screenshot of Insta Carousel

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

If you have any questions, feel free to contact me on any social media as @thatanjan. Stay safe. Goodbye.

About me

Why do I do what I do?

The Internet has revolutionized our life. I want to make the internet more beautiful and useful.

What do I do?

I ended up being a full-stack software engineer.

What can I do?

I can develop complex full-stack web applications like social media applications or e-commerce sites.

What have I done?

I have developed a social media application called Confession. The goal of this application is to help people overcome their imposter syndrome by sharing our failure stories.

Screenshot

Homepage

More screenshots

I also love to share my knowledge. So, I run a youtube channel called Cules Coding where I teach people full-stack web development, data structure algorithms, and many more. So, Subscribe to Cules Coding so that you don't miss the cool stuff.

Want to work with me?

I am looking for a team where I can show my ambition and passion and produce great value for them. Contact me through my email or any social media as @thatanjan. I would be happy to have a touch with you.

Contacts

Blogs you might want to read:

Videos might you might want to watch: