How to properly position elements in CSS
CSS can be used to define the positions of particular items such as divs, images and spans. However many people are not aware about positioning elements so are not aware how useful they can be in any website. The main two positioning that are used are absolute and relative. I will discuss the use of both and how they are used in a common design environment.
Absolute Positioning
Firstly, when items have an absolute position, the item is independent to all other items within the page as it shows the exact position within the browser without relying on any other elements.
Example 1
<span style=”left: 100px;”>This text uses absolute positioning </span>
We can see from this example that the span tag is positioned 100px from the left of the browsers screen because we defined the value of left to be 100px.
The reason why this includes absolute positioning is because as it is the first tag to appear it in effect inherits a position of absolute
Note
If you only have a small amount of code it may be suitable to included it within a tag by using style=”"
Also if you would like to include absolute positioning within your code you will need to type within style=”", position: absolute;
Relative Positioning
However we can also use relative positioning. This is when the position of an element relies on another.
Example 2
<span style=”position: relative; left: 200px;”>This text uses relative positioning</span>
So from this example we can see that this element would be 200px from the left.
Using Absolute and Relative Positionings together
However in both examples we can not see the true effect of the positions, so we will combine both examples so that we can see how they are used in a common design environment.
Example 3
<span style=” left: 100px;”>This text uses absolute positioning</span>
<span style=”position: relative; left: 200px;”>This text uses relative positioning</span>
So in this example we can see that the text which has an absolute position is 100px from the left of the browser. We can also see that the text which uses relative positionings is 200px from the left of the absolute positioning text. So the relative positioning text would be 300px from the left of the browser as both left values need to be combined to find the total distance the the relative text is from the left of the browser screen.
Additionally you could change the left value to 50px:
<span style=”left: 50px;”>This text uses absolute positioning</span>
<span style=”position: relative; left: 200px;”>This text uses relative positioning</span>
The relative positioned text would still be 200px from the absolute positioning text however it would be 250px from the left of the screen as the absolute element’s left value has been decreased.
So we can see that when we use absolute positioning, its associated values are independent and the styles that are set only effect itself. However we can see that with relative positioning, its position is dependant on the absolute positioning as some of the styles set affect those which are positioned relatively from it. However please note that only the margins, paddings, and right/left/top/bottom values effect the relative position as other styles are not inherited unless defined within the code. We can see the effect this has if we remove ‘position: relative;’ or change the value of ‘relative’ to ‘absolute’
Well I hope you enjoy what seems to be our first CSS tutorial and I believe it is an important one introducing positions.
