Positioning of elements inside a page could be quite tricky. Nevertheless, it is a powerful way of creating wonderful layout and it gives freedom and flexibility. I would like to explain everything you need to know in order to use the correct method to place your elements using CSS styles.
First of all, let me point out that there are four method for positioning:
- static: this is the standard way of positioning; the element will be displayed following the normal flow of your page;
- fixed: a fixed positioning will place the element in a fixed position; the element won't move even if you scroll down the page;
- relative: with a relative positioning the element will stay relative to its normal position;
- absolute: the element will be positioned relative to the first parent that has a position other than static; if there's not such element, <html> will be that element.
Static
Almost everything in the page you're reading is static. The very words you're reading are in a static position. Static positioned elements are not affected by properties like top, bottom, left or right. Simple as that.
Fixed
Fixed positioned elements can overlap other elements (see below).
This text is
fixed positioned
Can you see the red text following your scrolling?fixed positioned
How so? The code behind that element is:
<div style="left: 0px; top:150px; color:red; position: fixed;">This text is<br />
fixed positioned</div>
You will notice that the text will stay in the fixed position and will follow you when you scroll the page.
In fact it might even be annoying!Note that values for top, bottom, left and right properties can be either pixels or percentage.
Relative
Relative positioned elements can overlap other elements, however the space reserved for the element will be always reserved. Let's see an example:
This text is relative positioned (left=50px)
The code used is:
<div style="left: 50px; position: relative;">This text is relative positioned</div>
As you can see the text inside the div is positioned using the left property. Now let's change that property value to -50px, and the result will be:
This text is relative positioned (left=-50px)
Wow! Now if you play around with the left, right, bottom, and top properties you will notice that you can even overlap the relative positioned element with other elements in your page.
(Now just notice how annoying is that fixed positioned element, isn't it?)
Absolute
Absolute positioning is the most tricky. The element can overlap other elements, and everything in your document will not consider the absolute positioned element, as if it didn't exist at all.Let's try to create one:
This text is absolute positioned
Now what? You do not notice anything special in it, I know. In fact the element has only a left property set:
<div style="left: 120px; position: absolute;">This text is absolute positioned</div>
Overlapping (z-index)
When elements are overlapping, the z-index property can be set to determine the order in which elements are overlapped. The greater the z-index value the more the element will be placed in front. If no z-index value is set, the last positioned element in the normal html flow will be positioned in front.
Today I had to change a bit this post. I'm sorry about that, and I am aware that for sometime the fixed positioned element was not visible. That was due to some changes made in the web thought blog template. I apologise for any inconvenience. Now everything should be alright.
ReplyDeleteI want to remind you that sometimes my examples are not really working as expected because the blogspot platform is not really giving me the freedom I would like to have. The validity of the explained code remains.