Slash Coding

  • Android Development
  • CSS
  • Subscribe
  • About Us
  • Contact Us
You are here: Home / Web Development / CSS / CSS Positions Explained in Detail

CSS Positions Explained in Detail

By Aneesh Bhatnagar

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.

CSS

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.

CSS Z Index

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.

Did you enjoy this article?
Subscribe to our email alerts when we post something new so you don't miss out.

About Aneesh Bhatnagar

Aneesh Bhatnagar is a freelance web developer, who specializes in front-end website development with HTML5, CSS3 and jQuery. He believes in transforming the entire web into a Responsive Web. He also specializes in use of Bootstrap framework to get websites up and running.

Search Slash Coding

Follow Us

RSS Feeds Facebook Twitter Follow Google+

Categories

  • Android Development
  • C++
  • Developer Tips
  • Slash Coding
  • Web Development
    • CSS
    • JavaScript
    • jQuery
    • PHP

Recently Published

  • Moving Ahead from Front End and Android Development
  • How to Export a Project from Android Studio
  • What is jQuery? Let’s Answer this Common Question today!
  • Mobile App Prototyping : Pixate Studio
  • How to Create a Countdown Timer using jQuery

Subscribe to Email Alerts

Eager to learn more from Slash Coding?
Sign up for daily email updates when anything new comes up. Get it straight in your inbox.

Follow Us on Social Media

RSS Feeds Facebook Twitter Follow Google+

Copyright © 2025 · Slash Coding · Powered by the Genesis Framework
Sitemap | Privacy Policy | About | Contact

×
Get Notified of the new Tutorials when they are posted!
Never miss any article update from Slash Coding. Subscribe to email alerts today!