CSS positioning

Positioning: Using CSS to place elements on a page

Basic CSS positioning

It is possible to use absolute and relative positioning to nest elements

All of the rules still apply

Nesting a relative element in an absolute element

The relative element is treated as a child of the parent element, which is absolutely positioned

In this case, the child element uses the upper left corner of the parent element to determine its place on the page (instead of the upper left corner of the window)

It moves relative to its original place in the flow within the parent element

Here's the markup for a block of text that will be enclosed within a <div> container that is absolutely positioned

.abpos { position: absolute;
            top: 260px;
            left: 40px;
            border: teal thick double
           }

Here's the markup for an image that will be relatively positioned within the block of text

.relpos { position: relative;
left: 150px
}

In the first page, the image takes its normal place in the flow

In the second page, it is relatively positioned within the absolutely positioned text block

Close the window to return to this page

If you check the markup of the second page, you will see this:

The css declaration is placed in the <div> container instead of the image markup because older browsers do not recognize positioning rules in regular HTML tags

Nesting an absolute element in a relative element

This time, the relatively positioned element is the parent and the absolutely positioned element is the child

The child will be positioned using the upper left corner of the parent element

This means that the absolutely positioned element will move as the relatively positioned parent element is moved

Here's the markup for a block of text that will be enclosed within a ><div> container that is relatively positioned

.relposx { position: relative;
              top: 270px;
              left: 0px;
              border: teal thick groove
             }

Here's the markup for an image that will be absolutely positioned within the block of text

.abposx { position: absolute;
              top: 0px;
              left: 150px;
              z-index: 0
             }

In the first page, the image is used as a background image behind the text

This is another example of stacking images

This is done by using the <z-index> with the image as 1 and the text block as 2

In the second page, the relatively positioned text block is moved 100 pixels to the right and the image moves with it

Close the window to return to this page

Next!

You are here: http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/csspositioning2.html
Last updated 3.15.06 - H. Rosenbaum