CSS positioning

Positioning: Using CSS to place elements on a page

Basic CSS positioning

The "real estate" of the browser window is the area where the web page is displayed

Every location in this live area has a set of coordinates associated with it

These x and y coordinates represent individual pixels in the window

The upper left corner of the window is x=0 and y=0 (or (0,0))

CSS allows you to have precise control over the positioning of elements in the window

When you mark up a page, the elements have a place on the page determined by the order of markup

CSS allows you to alter the placement of these elements, effectively removing them from the "flow" of the markup

This can be done in two ways with relative and absolute positioning

Relative positioning

Relative positioning is used to move an element (typically an image or a block of text contained in a <div> tag) out of its normal position in the flow of the page

The other elements on the page are not affected by this, so you have to use it carefully, since you'll produce overlaps and hidden sections of elements

This occurs because the other elements find their positions relative to the element's original position

You are positioning the element "relative" to where it used to be!

There is a new property to use to do this which can take several values

Here is an example of relative positioning (after viewing the second page, close the window to return here)

You can use any of the units of measurement we have mentioned to change the relative position of elements

Absolute positioning

Absolute positioning is used to place an element on a page at a precise distance from the upper left corner of its parent element

Absolute positioning has nothing to do with the element's original position on the page

There are four positioning options:

top: moving the element down from the top margin

right: moving the element to the left from the right margin

bottom: moving the element up from the bottom margin

left: moving the element to the right from the left margin

For example, the .css logo used on this page is positioned 110 pixels down from the top of the page and 80 pixels from the left of the page because of the following declarations:

.csslogo { color: gray;
               font-size: 42pt;
               font-weight: bold;
               top:110;
               left: 80;
               position: absolute;
               z-index:1
              }

Positioning with bottom and right does not work with all browsers, so you should use top and left

Absolute positioning is affected by the parent-child relationship

The positioning of the child element is determined in relation to that of its parent

This is why the block model is so important

An element that is not contained within any other parent element will have its absolute positioning determined in relation to the upper left corner of the page

This occurs because its parent is the <body> element

An element that is contained within a parent element, such as a <div>, will have its absolute positioning determined in relation to the upper left corner of the <div> element

Absolute positioning can use absolute (px) and relative (%) units of measurement

Next!

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