Thinking outside of the box

Monday May 25, 2015

Did you know that on a webpage everything is a box? It's true! Every div, every table, every paragraph, everything! They are all boxes. They have a height and a width. Not only this but everything on a webpage has a natural postion by default. This is called it's static postion. That means that when you create a paragraph or any other html markdown object, it has a natural position on the webpage.
So why does this matter?
Well in the field of website design placement of objects is crucial to site usuablity, that is why most often you will find navigation links either at the top or at the left of a web page, or why copyright information is most oftern at the bottom of a webpage. These things are not often by choose, but by convention. or rather by user preferences that have become conventions.
and here is where css postion attribute comes in handy...
the css position element allow you to place your objects where ever you please regardless of there naturally occuring postion. The postion attribute has 4 possible states static, relative, absolute and fixed. the best illustrations of how these values change the postion of an element can be found at Learn CSS Positioning in Ten Steps . Here is a brief description of the properties of these values.

static

  1. Default postion for all elements
  2. This is where the element will naturally appear on the webpage

relative

  1. appears relative to it's static postion
  2. must also accompany a top, bottom, left, or right css attribute
  3. can be used with z-index. by default relative postion overlaps static postion
  4. any child element with absolute postioning will be postioned relative to it's nearest relatively postion parent element

absolute

  1. Place exactly where you want relative to the nearest relatively positioned element,if any.
  2. If there is no such parent, it will default all the way back up to the 'html' element
  3. these eleemnts are removed from the natural flow of elements.

fixed

  1. positioned relative to the web browser window
  2. position doesn't change while scrolling