CSS: Continuing the Clarification of CSS Classification
In our last CSS tutorial, published about a month ago, we covered some of the Classification properties, which allow you to display elements, position them, choose where they will appear, control their visibility, and a whole lot more. In this article we will finish the discussion.
CSS: Continuing the Clarification of CSS Classification - Absolutely Relatively Speaking (Page 2 of 4 )
You can position elements by using either relative or absolute positioning. With relative position, you set where the element appears in relation to its original position. For instance, if you set it at 100 pixels, it will show up 100 pixels away from where it was originally intended to be. Here is an example:
<html>
<head>
<style type="text/css">
h3.left
{
position:relative;
left:-40px
}
h3.right
{
position:relative;
left:40px
}
</style>
</head>
<body>
<h1>Look! An element with normal positioning!</h1>
<h3 class="left">An element positioned left of where it would normally be</h3>
<h3 class="right">An element positioned right of where it would normally be</h3>
</body>
</html>
Stick that in your pipe and smoke it. And while you're at it, stick it in your editor and see how it looks.
To set the position with absolute, you tell the browser where to put the element. Period. Here it is in code:
<html>
<head>
<style type="text/css">
h1.absolutebottom
{
position:absolute;
left:100px;
bottom:150px
}
</style>
</head>
<body>
<h1 class="absolutebottom">This is a heading with an absolute position</h1>
<p>Below is an example of absolute positioning. Even though the H1 tag appears before this P tag, in the browser the text will appear below it because of its position.</p>
</body>
</html>
And here we have the same example, only using the top and right positioning:
<html>
<head>
<style type="text/css">
h1.absolutetop
{
position:absolute;
right:10px;
top:100px
}
</style>
</head>
<body>
<h1 class="absolutetop">This is a heading with an absolute position</h1>
<p>Below is an example of absolute positioning. Even though the H1 tag appears before this P tag, in the browser the text will appear below it because of its position.</p>
</body>
</html>
You can also position an element as fixed, which works relative to the browser window, or as static, which uses the position the page gives it.
If we want to only show a certain portion of a picture, we can do so with clip, like so:
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 20px 100px 10px)
}
</style>
</head>
<body>
<p>Here we use clip to show only a portion of an object</p>
Lastly, we can use Z-Index to determine which element goes on top of another by changing the index of the object. Here is an example of placing some text over an image:
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1>Look...I am on top of an image!</h1>
<img src="sample.gif" width="100" height="200">
</body>
</html>
Note that the Z-index is 0 by default. Setting it to -1 puts it underneath an object. Setting it to 1 places it on top.
Style Sheets 
HTML5 Boilerplate Introduction
