Short & accurate definition about ‘position’ in CSS

Skip this part, just me jibber jabber

Ever since I started developing web, I’ve seen and used the CSS attribute so-called “position“. But I’d never seem to understood what it does, I just randomize its value until I got what I needed (yeah that’s stupid and ignorance). But then, one day, I realize something big, something important is missing… I feel so empty inside… DAMN I HAVE TO WRAP MY HEAD AROUND THIS “POSITION” THING! So here it hoes *goes (sorry, typo), real short and accurate. Hope this post will help some fallen angel like I used to be.

Nerd part

HTML element is literally a rectangle of pixels, flows into your screen the in its most natural way. Your job is to position it to achieve a desired design.

  • CSS “position” attribute’s values:
    • static: Default values for all HTML element. Don’t need to concern about it.
    • fixed: 
      • Element will stay in a fixed position to the viewport (I mean the browser’s window).
      • Element will not move anywhere even when you scroll or have some other elements collide with it.
      • *Note: Use with caution, it may cause losing content on small viewport, like phones, tablet or small monitor.
    • absolute:
      • Simply place the element absolutely right where you desired with attribute like “top“, “bottom“, “right“, “left“. 
      • This element’s position will be relative to:
        • It’s parent element if the parent’s “position” is absolute or relative
        • If there is no such parent, it will default all the way back up to the <html> element
      • *Note: Absolute positioning will cause the element to be removed from the flow of elements on the page. Meaning that other static element can be collide with it. and it’s overuse or improper use can limit the flexibility of your site.
    • relative:
      • This value caused me the most painful headache ever. Contrary to what people (me) usually think, “relative” here actually means “relative to it self” (what the heck is that???)
      • “relative to it self” means that if you set “top”, “bottom”, “right”, “left” to this element, it will be shifted from the place where it would normally be. Which is great! 🙂
      • *Note: 
        • Relative positioning element will be always stay on top of other static positioning element. No matter what z-index you provide.
        • And as I mentioned, any child element of a relative element can be position absolute to its relative parent element. Which is great too! 🙂

That’s all! 🙂

There are many things which I did not mention in this article for the sake of Simplicity, but please, point me out if I’m wrong or misunderstand something.

Thank you for reading this. Give me a comment 😉

Have a lovely day 😉



Vector Images Come to Android and DIE PNG ???