› Dreamweaver tutorial: Absolute versus relative positioning in Dreamweaver

Dreamweaver tutorial: Absolute versus relative positioning in Dreamweaver

What you’ll learn in this Dreamweaver Tutorial:

  • Absolute versus relative positioning
  • Positioning content with AP Divs

This tutorial provides you with a foundation for working with Adobe Dreamweaver positioning. It is the fifth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.

Adobe Dreamweaver Tutorial: Absolute versus relative positioning in Dreamweaver

Absolute positioning: An element that is set to absolute strictly follows the positioning values given to it, relative only to its containing element. The containing element can be another div or the page itself. Absolutely positioned elements are pulled out of the normal flow of HTML content, and regardless of what surrounds them (for example, text content or neighboring divs), they always appear at the exact coordinates assigned to them.

Here is an example of a div absolutely positioned within another div. The larger div (Box #1) is the containing element, and so any positioning values assigned to Box #2 are relative to the element boundaries of Box #1.

Box #2 is contained, or nested, within Box #1.

Adding additional content to the containing box (#1) has no effect on the nested div. It remains positioned outside the flow of HTML.

Box #2 remains in position even with added content in Box #1.

Relative positioning: A relatively positioned element accepts values for position properties such as top and left, but it also takes the normal flow of neighboring HTML content into account. Here are the boxes and values shown in the preceding two figures; the only difference here is that the position property for Box #2 has been set to relative instead of absolute.

Box #2 is still offset, just as before, but it’s being
displaced by the content before it.

Although it appears that the top and left values have changed, they haven’t. Unlike absolutely positioned elements, relatively positioned elements stay within the normal flow of HTML content, which means that they can be displaced by the elements (in this case, the text) surrounding them. In this example, Box #2 is still 50 pixels from the top and 50 pixels from the left, but its point of reference is the end of the preceding text content, not Box #1.

Positioning items relatively is useful when you want an item to flow with the items surrounding it. The following image shows five divs nested inside a larger div to create a menu.

All menu items are positioned relative to one another, and
so they fall into place based on each other’s position.

The same example is shown in the figure below, with the position set to absolute for all menu items. The result is a collapse of the menu—all the menu items are trying to occupy the same place at the same time, without regard for their neighbors.

When set to absolute, the menu items stack on top of one another, because they
all must be at the same place, regardless of the elements that surround them.

Note

The files used for these examples are located in the dw05lessons folder, and are named absolute_relative.html and relative_menu.html. Open them in Dreamweaver and explore the code to further your knowledge.

Any element, or, in this case, any box, can have the position property applied, and one of five possible values can be set: absolute, fixed, relative, static, or inherit. The two most commonly used are absolute and relative, and although both can accept positioning properties such as top and left, they are rendered differently, even with identical positioning values.

Pages

These tutorials are created by and the team of expert instructors at American Graphics Institute.