You can use absolute positioning to place an element at an exact location on a page. An element placed using absolute positioning remains at a fixed location relative to the top-left corner of the page. It floats on top of, or sits behind, text or other page elements.

You can place 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 figure below.

The x-coordinate and y-coordinate of a page element

The position of the page element in Microsoft FrontPage

The position of the page element in a Web browser

If an absolutely positioned element is placed in a position box (position box: In Design view, a rectangle representing a page area with CSS positioning applied. The position box, which may contain any page elements, is visible only when Show All is selected on the Standard toolbar.), the coordinates are relative to the upper-left corner of the position box, rather than the page. You create a position box by grouping together page elements. Find the link to information about how to group page elements in the See Also box, which is visible when you are connected to the Internet.

You can specify the coordinates of the page element relative to the upper-left corner of its container, in pixels (pixel: A single unit of measurement that your computer's display hardware uses to paint images on your screen. These units, which often appear as tiny dots, compose the pictures displayed by your screen.). You can also specify the dimensions of a position box by using the following units:

• Pixels (px)
• Font size (em)
• X-height of the font (ex)
• Inches (in)
• Centimeters (cm)
• Millimeters (mm)
• Points (pt), where one point is equal to 1/72 of an inch
• Percentage of the page height or width (%)

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).

When viewed at different screen resolutions (resolution: The fineness of detail in an image or text produced by a monitor or printer.), 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 because other page elements such as text are displayed differently.

Note  Adding page elements by using absolute positioning with DHTML (DHTML: An extension of Hypertext Markup Language (HTML) that adds multimedia, database access, and an object model that programs can use to change styles and attributes of page elements (objects) and to replace existing elements (objects) with new ones.) may cause either the DHTML effect or the absolutely positioned element to behave unexpectedly. Find links to information about using animation and DHTML effects in the See Also box, which is visible when you are connected to the Internet.

Use relative positioning to place page elements in line with text. Regardless of the changes you make to the page above or below this point, the layout of the relatively positioned element 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 graphic image 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-index refers to an element's position in a stack of elements, which includes the page itself. The main page layer is zero; a positive z-index means that the element is in front of the main layer, and a negative number means the item is behind it. Using a negative number, you can even position elements "underneath" the page layer.

While you can select some page elements by clicking them directly or by using the menu commands, you select other page elements, such as graphics or form fields, by clicking their corresponding anchor icons. You can see these anchor icons when you show all nonprinting characters. The anchor is displayed in the text flow where you originally inserted the element. .

You can combine the types of positioning 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 (position box: In Design view, a rectangle representing a page area with CSS positioning applied. The position box, which may contain any page elements, is visible only when Show All is selected on the Standard toolbar.) 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 (ScreenTips: Notes that appear on the screen to provide information about a toolbar button, tracked change, or comment, or to display a footnote or endnote. ScreenTips also display the text that will appear if you choose to insert a date or AutoText entry.).

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) (CSS: A cascading style sheet is a document containing style information that can be referenced by multiple Web pages. Styles define appearance and formatting of content on Web pages and allow authors more control over how content is displayed in browsers.) 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.