DEV Community

Cover image for CSS Positions Simplified
Ansub Khan
Ansub Khan

Posted on

3 1

CSS Positions Simplified

CSS positions property can help you set the position of the element in the HTML. it is a very useful property and often quite confusing for beginners so I tried to make things easy today!

** let's look at the different types of position properties in CSS.
**

  1. static
  2. relative
  3. absolute
  4. fixed

Static

  • it is the default for every element
  • it means that the element will flow into the page as it normally would.
  • use it to remove the forcefully applied position to the element.

static.png

relative

  • it helps us to change the location of the element relative to itself.
  • for example:
<div class = "relative"> </div>

//CSS 

.relative{
        position: relative;
        top: 10px;
        left: 10px;
}
Enter fullscreen mode Exit fullscreen mode

relative.png

absolute

  • this lets you place the element exactly where you want to put it.
  • this changes the element according to its parent's element, and when there is no parent element, then it is going to change position according to the HTML element.
<div class = "absolute"> </div>

//CSS 

.relative{
        position: absolute;
        top: 10px;
        left: 10px;
}
Enter fullscreen mode Exit fullscreen mode

absolute.png

fixed

  • position is going to fix even if you are going to scroll the webpage
  • it is useful for fixed headers and footers
<div class="myDiv"></div>

.fixed{
    position: fixed;
}
Enter fullscreen mode Exit fullscreen mode

fixed.png


if you want any help with the positions of CSS or any other query then please contact me on my Twitter

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay