In this example, we will use CSS to position a div block at an absolute position in the page. Normally, a div is displayed "in document flow". In other words, the div is positioned in the upper left of its container. So its location is dictated by where its container element is. We call this relative positioning.
However, if you want a div to be positioned absolutely at say 20 pixel from the top of the page and 15 pixels from the left of the page, then you have to take it out of its normal document flow by using the "position:absolute" CSS property as in the below code ...
Here we have a div with id of "mydiv". Its CSS sets it to be 40px high and 30px wide. We made its background-color red so that we can see it.
But the important CSS property is the "position:absolute". It tells the browser to look for the CSS properties "top", "left", "bottom", "right". Here we specify the "top" property to be 20px. So the browser puts this div at location 20 pixels from the top of the page.
But you need to tell the browser both the vertical and and the horizontal position where you want the div to be placed. So we tell the browser to place it also 15 pixel from the left of the page with "left:15px".
If we like, we could have told the browser a "right" position instead of a "left" position. Or we could have used a "bottom" position instead of a "top" position.
What happens if we tell the browser both a left and a right position, say "right:50px" as in ...
This will be hard for the browser to follow all the properties that have been specified in the CSS. We told it to put the left edge of the div 15 pixels from the left edge of the page. And at the same time we told it to put the right edge of the div 50px from the right edge of the page. But the div is specified to be only 30px wide. So this is not possible if the page is 600px wide for example.
What is the browser to do? You have to experiment, as it might vary as to how each browser manufacture decides to handle this situation. You should not be writing such inconsistent CSS code anyways. In Firefox, it ignored the "right" property so the rendering of the div was same as before.
Now, what if we removed the width constraint by deleting the "width:30px" as in ...
Now the browser is able to fulfill both the "left" and the "right" setting by adjusting the width of the div as necessary.
As mentioned before, when you use the "absolute" positioning, you put the element out of "document flow". That means that the container in which the element is irrelevant in its positioning.
For example, let's put our red div inside a green bordered div called "wrap". As in ...
Noticed that when our red div is absolutely positioned, it is absolutely positioned even if it means popping outside of the green div which contains it.
The "position:absolute" is essential for this to happen. Because by default, elements are "relatively positioned". So if we were to remove the "position:absolute" property from the red div, it would pop back inside the green div as it normally would go when it is relatively positioned. See the below is an relatively positioned red div inside a green div after we have removed the absolute positioning of the red div ...
