Relative, absolute and fixed position for beginners

It doesn't matter on which part of your journey you're at, even if you've built a couple of websites when you encounter these terms it can be SO confusing.

Of course it is! So let's go over them together.

We all start with an static positioned element in our HTML document, this means it just follows the normal flow of the content you're adding. It's content on top of content, but this doesn't make a website look good. This is where we can manipulate elements using CSS prosition properties.

Let's start with three squares i centered using flex-box.

.container{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Absolute positioning

Let's apply the absolute position to our pink square element. This means our pink element is removed from the normal flow of our HTML document, and so it has no space created for it and it can absolutely overlap other elements.

.absolute{
    width: 70px;
    height: 70px;
    background-color: rgb(212, 120, 135);
    position: absolute;   
}

Where does it go? Well since it doesn't want to get far from his neighbours it goes to a relative position in regards of the closest neighbour. If there aren't any in the neighbours, it goes for the containing element or if you will the whole neighbourhood(body). You can use properties like top, right, bottom, and left to give it its last position. The other elements will act as if it's not there.

Relative positioning

Wait, but nothing happened??...

Not quite my friend, applying the property of position: relative; to an element will make it be on a position relative to the one where it started, as in the normal flow of our HTML document. It occupies the same space as if the page were static.

Unlike absolute, it remains in the flow of the document in the 'static position' but with the difference that we can use left, right, top, bottom and z-index and it'll affect it according to itself. Let's give it a top and left positioning to our blue square:

.relative{
    width: 70px;
    height: 70px;
    background-color: rgb(13, 93, 146);
    position: relative;
    top: 10px;
    left: 10px;
}

Fixed positioning

It removes an element completely from the flow of the HTML document and no space is created for it there. It's not like a 'mean girls' thing and it's being left out, the element, in this case our square, is positioned relative to the containing element stablished by the viewport.

.fixed{
    width: 70px;
    height: 70px;
    background-color: rgb(79, 209, 96);
    position: fixed;
}

Instead of being relative to the parent, they're relative to our HTML document. You can use top, right, left and bottom. It basically is fixed to the page, it'll follow you when you scroll like if you put glue to it.

Conclusion

To this day i still need to look up these concepts from time to time on Google. When i was learning it this was one of those topics that made me realize how much fun you can have building websites. Specially if you mix it with grids or flex-box.

If you have to keep coming back to know what these concepts are, don't feel bad! You're doing great :)

I really hope you learned something useful today!!

As always thank you SOOO much for reading!! :)

Don't hesitate to contact me and let me know what you think in the comments!

☕If you enjoy my content Buy me a coffee It'll help me continue making quality blogs💕

💙Follow me on Twitter to know more about my self-taught journey!

💜Make sure to check out more upcoming articles on my Web Design for Beginners Series

❤️ Also subscribe to my Youtube Channel !

🖤And for more content and tips on TikTok !

💛This is the LAST article of the Technical Writer Journey Series!

Resources

• https://developer.mozilla.org/en-US/docs/Web/CSS/position
• https://css-tricks.com/almanac/properties/p/position/
• My Notes :)