About positioning

Positioning is how you place elements, such as text and graphics, anywhere on a page. You can position elements in front of or behind other elements, or group them together.

Absolute positioning lets you place an element at an exact location on a page. You can position the element by dragging it to the location you want, or you can specify coordinates, which are relative to the upper left corner of the page or frame the element is in, as shown in the example below.

If an absolutely-positioned element is placed in a position box, the coordinates are relative to the upper left corner of the position box, rather than the page.

An absolutely-positioned page element is not inline so that it moves with the text. Instead, it floats on top of, or sits behind, the text. The text does not flow around the element.

When viewed at different screen resolutions, the element might not be placed as you intended, although the element still appears at the pixel coordinates you specified. When the screen resolution changes, so does the layout, since other page elements such as text are displayed differently. To ensure your pages are displayed well to all site visitors, you should test your pages in a variety of browsers and screen resolutions.

You can specify the coordinates of the page element relative to the upper left corner of its container (for example, an element is inside a page or position box), and specify the dimensions of a position box. You can use the following units:

For example, you can set a position box to be the same width as the page (set Width to 100%), and 20 pixels high (set Height to 20 px).

Note Using absolute positioning with DHTML may cause either the DHTML or positioning to behave unexpectedly.

Use relative positioning to place page elements inline with text. Regardless of the changes you make to the page above or below this point, the layout of the positioned elements remains intact. You can use relative positioning for animation and DHTML effects.

You can create a floating page element that lets other elements, such as text, wrap around it. A floating element is removed from the flow of text, and is aligned left or right. You can also specify the height and width of the floating area of the element. For example, the figure below shows how text flows around a paragraph that floats to the right, creating a sidebar of text that is aligned to the right of the page regardless of the layout of text around it.

You can use positioning to overlap elements. The z-order refers to an element's position in a stack of elements, which includes the main page layer that contains text. You can even position elements underneath the main page layer.

The main page layer is zero; a positive z-order means that the element is in front of the main layer, and a negative number means the item is behind it.

Selecting a positioned element can be trickier than selecting a page element in the main layer. For example, when trying to select a page element that is behind the text flow, you might select page elements in the text flow instead.

Many types of page elements, such as graphics, form fields, and other objects, are indicated with an anchor icon when you show all nonprinting characters (click Show All Show All button

). The anchor is displayed in the text flow where you originally inserted the element. For example, an absolutely-positioned graphic might appear at the top of the page, but if you originally inserted the graphic at the bottom of the page, the anchor is displayed at the bottom. To select the object, select the corresponding anchor icon.

Some page elements, such as text or tables, are not indicated by an anchor icon, and you must select the element by clicking it directly, or using menu commands.

You can combine positioning features to achieve a variety of results, such as to keep a group of page elements together as a unit. For example, you can add a position box to a page, and inside the box, add multiple page elements using absolute positioning to lay them out. The result is a position box that is positioned with respect to the text flow on the page, but the layout of the elements inside the box is always preserved, regardless of any changes you make to the rest of the page. Even when the window is resized, the layout of the elements inside the position box remains the same.

Grouping page elements

Layout of grouped elements is preserved, even when the Web browser window is resized

To view the properties of a page element, position the mouse pointer over it. The properties are displayed as a ScreenTip.

Page layout can vary when viewed at different screen resolutions, even though an absolutely-positioned element always appears at the same coordinates you specify. To ensure the page is displayed well to all site visitors, you should test it at different screen resolutions.

Note Positioning works with Web browsers that support cascading style sheets (CSS) 2.0, such as Microsoft Internet Explorer 4.0 and later, and Netscape Navigator 4.0 and later. When viewed in earlier browser versions, positioned content is aligned left, and is located inline with the text rather than uniquely positioned.