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

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 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