CSS Property: Positioning

I know that one of the biggest things about learning web languages is remembering all of the different properties you can use. CSS (cascading style sheets) seems to have the largest amount of information to remember. As a help, I thought I would post about some of the harder properties you can use in CSS and how to use them. In this post I will be talking about  the position element.

Position:

The position property seems to be one of the hardest properties for people to grasp (I know it took me a while before I got the hang of it). With the position property you have a couple different values you can use.

  • Static
    • This is the default position of elements on the page. It displays elements in the order they are written out in your html.
  • Relative
    • This allows you to position your element relative to its normal static position. For example, if you add left: 30px, it adds 30px to the element’s left relative position in relation to the parent element.
    • You should only use two of the four sides of the elements (i.e. left and bottom, left and top, right and top, right and bottom). You can use left and right together but it would add your left value to your right value. For example, if you had an element with no width set and you add left: 30px; right 0px; You would get a horizontal scroll bar because your element would be going 30px over your page. In comparision, with absolute it would subtract your left from your right (so 30px in from the left but still 0px from the right).
  • Absolute
    • This is very similar to relative positioning except that with absolute positioning, the element isn’t going to be relative to the parent element. With absolute positioning it is, by default, relative to the html tag. If you add left: 30px and top: 40px, this would move your element to be 30 x from the left side of your page and 40px from the top of your page. If you don’t want this to be the default, this is very simple to fix. If you want it to be relative to,  say, the grandparent of your element then you would just need to add a position:relative or position:absolute to your grandparent element. By adding one of these two positions it tells your element that you want it to be absolute to your grandparent element and therefore would be 30px from the left and 40px from the top of your grandparent element. Now the grandparent element can be position:relative (to get the absolute element to be relative to it) and still act like a static element if you don’t add a left, top, bottom, or right style to it.
    • Unlike relative positioning, you can use left, top, right, and bottom to position your element but know that if you use top:0 with a bottom:0 it will put the top of your element flush with the top of your browser and extend your element all the way to the bottom of your browser (the height of your browser) unless you add a height to your element (in which case top gets precedence over bottom and left gets precedence over right).
  • Fixed
    • This positions your element relative to your browser window. This is nice when you want to scroll down but still have your element show as you scroll. Ever wanted a sticky header? This is the position you use to do that. If you want your header to be flush with the top of your page then you would add position:fixed and top:0px; and it would sit at the top of your browser window (even after you scrolled).
    • Like absolute positioning you can use left, right, top, and bottom to position your element.

I hope that helps you understand positioning a little better than you did before. Check back for more tips and tricks soon!

Leave a Reply

Your email address will not be published. Required fields are marked *