Thinking Outside the Box: CSS Positioning

27 Sep 2015 . CSS . Comments

#css #dbc

If you are just getting into CSS, you must be wondering what it the importance of the positioning attribute is. CSS (Cascading Style Sheets) are a crucial part of making a site look professional and inviting to all those that are eager to visit your site. There are couple things that I would suggest to new comers: First, have a clear idea of what you want the website to look like before you dig in and make all sorts of changes.

Having a clear idea of what you want your site to look like might mean that you may have to make some changes the the semantics of the HTML that you used. Its better to fix it before you start to apply styling changes. Once you have a clear idea of what the structure of your page will be, you will want to make your page look like your wireframe.

One of the most helpful ways of doing this, is putting a different color border around each of your block elements. By putting a border around your elements, you will be able to see where an element begins and ends, without constantly referring back to the Dev Tools in Chrome(or whatever browser) you happen to be using. Now that you have a border around all your elements, lets dig into the different types of positioning available to us:

Absolute Positioning:

Absolute Positioning is one of the positioning attributes, that I would use sparingly. Absolute positioning is like hardcoding the position of an element on a page. The position will be exact regardless of the window size.

Relative Positioning:

Relative Positioning will place an element offset by how much you have altered the position. For example if an element gets placed on a page 50 pixels in to the left, but you want to move it another 10 to the left. You can tell tell the css to move it 10 pixels over.

Fixed Positioning:

Fixed Positioning is similar to Absolute Positioning, with one key difference. In Fixed Positioning, the positioning is in relation to the window or what they call the "viewport".