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>
<p><img border="1" src="sample.gif" width="150" height="150"></p>
</body>
</html>
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.
Next: Changing the Way You Curse >>
More Style Sheets Articles
More By James Payne
