Position Properties

Position Absolute Contained in the Body

The page demonstrates the basic positioning properties: absolute, relative and z-index.
The position of several objects on the page wil be applied to the body of the
web page, and therefore, is in reference to the coordinates of the browser window.
Position rules can also apply to the coordinates inside a parent container, however,
Internet Explorer does not support position properties inherited inside a parent element
well, therefore, I will not attempt to demonstrate positioning inside containers.

The image at the left is positioned absolute at 320 pixels from the top and
680 pixels from the left of the browser window. Becasue it has an absolute
position the image would be positioned there even if text or other objects
were also in that position.

Below is the CSS rule that defined its position:

.image-1 {position: absolute; top: 320px; left: 680px;}

The image is applied to the source code like this:

<div class="image-1">
<img src="image-1.gif">
</div>

The image below is positioned as relative at 50 px from the top of the
neighboring object. In this case the neighboring object is this paragraph.
It is positioned 100 px from the left. Because it is relative positioning
it will flow, or offset, relative to the nearest elements on the page.
Because this page has a margin-left of 80px, the image below will offset
100px from the left of the page margin, for a total of 180 pixels from the
left side of the browser window.

Its rule is: .image-2 {position: relative; top: 50px; left: 100px;}

To the right you see two separate images, both with absolute positioning and
layered one on top of the other. The object on the bottom has a lower z-index
number then the object on the top. Their rules are written like this:

.z-low {position: absolute; top: 680px; left: 600px; z-index: 1;}

.z-high {position: absolute; top: 740px; left: 656px; z-index: 2;}

All objects have a default z-index number of 1. Text can be written on top
of photos by positioning it over the image with a higher z-index.

The above shadow effect is created by two text rules:

.text-1 {font: bold 26px arial; color: gray; position: absolute; top: 1000px; left:80px;}

.text-2 {font: bold 26px arial; color: blue; position: absolute; top: 999px; left:78px; z-index: 2;}

Creating a Shadow Effect with Positioning

To Top