When I started coding websites for other people, I was really confused with the different positioning options that CSS provides. The options provided actually sound pretty similar and it is normal for anyone to get confused with all that. But then, with time and different experiments, I understood the various positioning options in CSS and here I am to explain them to you in brief.
Well, before we begin, let me tell you the various positioning options that CSS provides and also how to use them. To specify a position for any element in CSS, just type “position: [type]” in that element’s CSS styling. Now, the various positioning styles provided are:
- Absolute
- Fixed
- Relative
- Static
That being said, let us proceed with understanding what each of these positioning style actually is and what it does. Let me begin with the most basic one first.
Static Positioning
This is the default positioning in CSS. It positions the elements as they appear in the HTML code, one below another or next to each other, depending upon the HTML markup. This positioning type is hardly ever used, as mentioning this makes no sense unless the parent element has a different positioning and a static one is required for that element.
Fixed Positioning
Fixed positioning is something that enables you to fix an element on the screen, even when the webpage is scrolled. It basically fixes the element to the view port, no matter how much you try to scroll, the element will not move from its place. It is useful in some situations, like when you need to set a sticky or fixed navigation bar on the top of a webpage. I have used it on various projects, for various reasons. This is that type of positioning style that you need to be really careful with when using.
Absolute Positioning
Absolute positioning is one of the most powerful positioning style you can have in CSS. It enables you to place your element exactly where you want it. You can set the position of any element by specifying the value for the top, bottom, right and left attributes. Also, Absolute Positioning is done with respect to the relative element (parent) of this element. If no such element exists, then the element will be positioned with respect to the top of the page itself.
Relative Positioning
Relative positioning is probably the most confusing positioning style. Most people think that it allows them to position an element relative to the element just before it. But, that is not what this is. Relative Positioning simply defines the position of an element relative to the position that it would have been on Static Positioning. The relative positioning style is pretty widely used and is easy to use if you know the entire basics of it.
Additional Information
With defining any positioning type for an element, except the static one, you unlock the z-index property of CSS. This property allows you to position elements on top of one another. The element with the z-index value of 0 or -1 will be the one below all the elements that have a higher z-index, say 99. In other words, higher the value of z-index, higher is its position on the web page.
Well, that’s all that I have in stock for you all today. I hope I was able to explain to you the various Positioning types/styles in CSS and you understood them well. If you have any doubts or questions, feel free to drop in a comment or get in touch with me via the contact page. Also, don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter.
