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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay