Using CSS Positioning
Using CSS Positioning




CSS-P (positioning) allows us to position elements on a page by using coordinates.
Look carefully at the heading at the top of this page.
Note the drop shadow, this is not a graphic it was done with CSS positioning.
By placing the same text slightly out of alignment we can get a drop shadow effect.

According to the W3C there are four types of positioning static, absolute, fixed and relative.
However IE6 does not support fixed positioning and static refers to the 'normal flow' of an html document so we will only consider Relative and Absolute positioning.




This is the
first CSS layer

This is the second CSS layer

Here is another example of absolute positioning being used to overlap elements.
Here is the code.

<head>
<style type="text/css">
#element1 {background-color:steelblue; position:absolute; top:200px; left:600px;}
#element2 {background-color:orange; position:absolute; top:205px; left:605px;}
</style>
</head>
<body>
<div id='element1'><br /><br />
This is the <br />
first CSS layer<br /></div>
<div id='element2'> <! id tag identifies an element -->
This is the second CSS layer</div>
</body>

Exercise
Create a web page with a div tag that
- has a background colour set to darkred and
- located 400px from the top and 300px from the upper left hand corner of the screen.