Cascading Style Sheets

Web Design & Development

CSS Positioning

Positioning properties let you specify the top, bottom, left and right positions of elements. With this you can specify the shape of an element or overlap elements. Positioning properties include:

bottom - specifies bottom edge of an element (auto, %, length)
left - specifies left edge of an element (auto, %, length)
right - specifies right edge of an element (auto, %, length)
top - specifies top edge of an element (auto, %, length)
position - spaces element in a static, relative, absolute or fixed position
- static
- relative (move element relative to its normal position)
- absolute (specified with left, top, right, bottom)
- fixed
z-index - stack order of an element (greater numbers first)

Example:

h1
{
position:absolute;
left:100px;
top:150px;
}

Lets try it: http://www.w3schools.com/css/css_positioning.asp

Samples:

Here is a sample of CSS absolute positioning
Here is a sample of CSS fixed positioning Note: with the warning however that it does not work the same in IE and Firefox, so I actually advise against using it.

Note:

On the overlapping items you can also specify other attributes like background color. It should be noted that background-color:transparent may prove useful to you sometimes.

Consider this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
I am a bunch of text I am a bunch of text I am a bunch of text I am a bunch of text
I am a bunch of text I am a bunch of text I am a bunch of text I am a bunch of text
I am a bunch of text I am a bunch of text I am a bunch of text I am a bunch of text
I am a bunch of text I am a bunch of text I am a bunch of text I am a bunch of text
I am a bunch of text I am a bunch of text I am a bunch of text I am a bunch of text

<div id="overlay">I am red text I am red text I am red text I am red text I am red text I am red text I am red text I am red text I am red textI am red text I am red text I am red text I am red text I am red text I am red text</div>

<div id="overlay2">I am red text I am red text I am red text I am red text I am red text I am red text I am red text I am red text I am red textI am red text I am red text I am red text I am red text I am red text I am red text</div>
</body>

Try it and see if it does what you expected.