In this video we'll discuss static, relative, absolute, and fixed positioning in Dreamweaver.

We start with Dreamweaver open and an HTML page loaded. We will use this page to demonstrate the different positioning types for content on a web page.

Now that the page is open in a browser, note the footer at the bottom. This element currently has static positioning and is aligned with everything above it. Static positioning stays with the normal flow of the content on a webpage.

Back in Dreamweaver, select the footer element and edit its CSS rule so we can change the positioning attribute.

With the Rule Definition dialog open, select the Positioning category.

Use the Position dropdown to change the position type to relative. To help highlight the change in position, change the Left Placement to ten pixels.

Click OK and preview your changes.

In the browser preview, you can see that the footer is now moved ten pixels to the right of its former static position.

Let's move on to absolute positioning. Select the footer element in Design view.

Begin editing this rule by clicking either the Edit Rule button in the CSS section of the Properties panel below, or by right-clicking the rule in the CSS Styles panel on the right.

When the CSS Rule Definition dialog opens, select the Positioning category.

Now, change the Position dropdown to absolute, and set the Left Placement to 0 pixels.

Set the Top Placement field to 300 pixels, and click OK.

From here, preview your site. Click Yes when prompted to save your files.

In the browser preview, you can see that the footer is now shown 300 pixels from the top of the page. This is because of the Top Placement field you set. The footer is now outside the normal flow of the page, and will always maintain this placement with absolute positioning.

We'll try fixed positioning next. Right-click the rule in the CSS Styles panel to begin editing it again.

Back in the Positioning category, change the Position dropdown to fixed. Fixed positioning keeps an object's position on the screen no matter where someone scrolls the browser to. Keep the Top Placement at 300 pixels, and click OK.

Preview your page once more to see fixed positioning in action.

The footer is seen here fixed to a location 300 pixels beneath the very top of the page. Notice that when we scroll down, the footer will stay in its location, overlapping page content in a different area.

You have successfully tried all the available psoitioning types for elements on a webpage.