Share via

Positioning Elements in Web Pages

  • Article

If you are creating pages that will be displayed using Internet Explorer 4.0 DHTML, you can place elements on your page and position them absolutely — that is, you can assign them a position that uses x and y coordinates relative to the window in which they appear. (In contrast, elements that are not positioned absolutely appear in the page in-line with the HTML text around them.) Because you can place absolutely positioned elements anywhere on the page, you can also layer them.

Note   Absolute positioning is not supported in versions of HTML before 4.0. If pages in your application will be displayed in a wide variety of browsers, it is a better idea for you to position elements by using paragraph alignment and tables.

Container objects such as tables and divisions (DIVs) can also be absolutely positioned. The objects in the container are then absolutely positioned with respect to the container.

In the editor, you use Design view to work with absolutely positioned elements. In Design view you can convert elements to be absolutely positioned and drag them into position.

To position an element absolutely

  1. Switch to Design view in the editor.

  2. Select the element to position.

  3. From the Format menu, choose Absolute Positioning. The editor converts the element to absolute positioning at its current location.

  4. To change an element's location, drag it to where you want it on the page.

The element's location in the HTML text of the page is not important. In Design view, the element appears at the x and y coordinates you specify. If you choose Show Details from the Design toolbar, the element's anchor — its location within the HTML text — is indicated with the special glyph.

You can also use a division (<DIV> block) or span (<SPAN> block) to combine elements into a collection that can be positioned absolutely. For example, you can combine several paragraphs and an image into a division and then position it absolutely.

To combine elements in a division and position them absolutely

  1. Switch to Design view.

  2. Select the elements that you want to combine. The elements must be sequential in the document.

  3. From the HTML menu, choose Div.

  4. In the Insert DIV dialog box, choose Absolute, and then choose OK.

The HTML editor puts a division (<DIV> and </DIV> tags) around the selected elements. You can now select the entire division in Design view and position it absolutely.

Note   If you have specified an individual element as absolutely positioned, and the element in turn is inside a division that is also absolutely positioned, you will be able to move the individual element outside the bounds of the division when dragging it. However, it still belongs to the division and will be moved if you move the division.

To combine elements in a span, you create a span, select it, and then choose Absolute Positioning from the View menu.

To make it easier to position elements, you can cause all new objects dragged from the Toolbox in Design view to automatically be positioned absolutely.

To position elements absolutely when dragging them from the Toolbox

  • Set Absolute mode by choosing the Absolute Mode button on the Design toolbar. Any element that you drag from the Toolbar in Design view from then on will be positioned absolutely.

To help you align elements precisely, you can use an invisible grid.

To align elements on the grid

  • In the Design toolbar, choose the Snap to Grid button. To set grid spacing, choose Options from the Tools menu, choose HTML, and then set the spacing using options under Grid.

    Note   Changes you make to grid settings do not take effect until the next time you open the document.

To prevent you from inadvertently moving an element that you have positioned absolutely, you can lock it into position. After an element is locked, you can still nudge it using SHIFT+arrow keys.

To lock an element in position

  • Select the object, and then choose the Lock button in the Design toolbar.

Absolutely positioned elements are layered so you can overlap them. An element's layer is specified by its Z order style attribute. HTML elements that are not positioned absolutely are on layer zero. An element with a positive Z order value is in front of those elements. The lower the value, the closer the element is to the front. An element with a negative Z order value appears behind elements on the page that are not absolutely positioned.

To change an element's layer

  • Select the element, choose Z Order from the Format menu, and select one of the options from the following table to move the element toward the back or the front:

    Option Action
    Bring to Front Moves the element in front of all other elements in the same container. If the element has a negative Z order, assigns it the negative Z order value closest to zero.
    Send to Back Moves the element behind all other elements in the same container. If the element has a negative Z order, assigns it the negative Z order value furthest from zero.
    Bring Forward Moves this element in front of the element with the nearest zorder in the same container.
    Send Backward Moves this element behind the element with the nearest Z order in the same container.
    Behind Text Changes the Z order of the element to a negative number to put it behind text on the page. (Available in Design view only.)
    Front of Text Changes the Z order of the element to a positive number to put it in front of text on the page. (Available in Design view only.)

    –or-

  • Select the element, and then in the Properties window set its Z order value (the .zorder style attribute). The Z order value of other absolutely positioned elements on the page is automatically adjusted. If you set a negative Z order value, the absolutely positioned element appears behind the HTML page.