The CSS attribute postion helps you position a block of text or a picture on your html page.
When specifying the new location we need to specify how much to the left or right or down or up we want the text or picture to be.
We can use several different types of measurement units to describe the position. There exist the following units:
There are five posible position types, relative, absolute, static, fixed, and inherit. We will focus on the first two.
Making the position relative means the text block or picture will be positioned relative to where it would ordinarily have been. The space that the element would have taken up is still reserved for the element in its normal position but its position is changed. This means that other elements will be placed as if the element were in its normal place.
See this text for an example of using relative positioning:
If I specify the position to be
absolute
then I mean the position I define for the element is relative to
the top of the page, not to its normal location.
In this case, the element (paragraph) will be located with no regard to
the preceding paragraph.
Furthermore, unlike relative positioning, in absolute positioning
other elements will be placed as if this element does not exist at all.
If a browser window is made very narrow, absolute positioned elements will
remain in place,
relative positioned ones will move down.
See this example:
Notice that the second paragraph is slightly more to the left than the first even though they are both placed 12em from the left side. How come they are not the same distance from the left then? The answer is that the first paragraph is a relative position, so it is 12em from where it would have been. The body tag has a built in style which has a left margin. This margin is added to our 12em and pushed the paragraph over more to the right. In absolute positioning , we ignore the body tag and we position thh paragraph relative to the actual left side in the browser.
When using positioning we can either intentionally or unintentionally cover other text or pictures with the positioned text. See the below text that is place on top of other text in a confusing manner.
When you use positioning, often you will find that things are not where you thought they would be. This is usually because you have used relative positioning and have not taken into account the space the moved text is still taking up in it original place. Also, if you have used absolute positioning to lower a text , let's say, then any following unpositioned text will act as though the positioned text is non-existent and will write over it. You need to adjust all text that follows positioned text. For this reasons, it is often a good idea instead to use the box model (i.e. margin, padding ..) to space out text and pictures. Use positioning sparingly and only when you need to put an element in an unusual place, a place for which no obvious box modelling will work.
©Nachum Danzig 2010