Position a layer

  • Article

The position of a layer on a web page is determined by the layer's positioning style (absolute or relative), wrapping style (left, right, or none), order along the z-axis (z-index value) and relative position coordinates (left, top, right, and bottom).

Tip

In addition to the steps that are provided in this topic, you can also set a layer's positioning style, relative position coordinates, and order on the z-axis (as well as other layer properties) by selecting the layer and setting these values in either the CSS Properties panel or the Positioning toolbar. For more information, see CSS Properties paneland Positioning toolbar.

To set a layer's order on the z-axis

In the Layers panel, do one of the following:

  • Drag the layer up or down the list to the position you want. The layer's z-index is then set to one greater than the layer that is listed below it in the Layers panel.

  • Double-click the layer's value in the Layer Z-Index column and type a new value.

  • Right-click the layer and select Positioning, in the Position dialog box, specify a value in the Z-Order box, and click OK.

To modify a layer's position by using the Position dialog box

  1. To open the Position dialog box, do one of the following:

    • In the Layers panel, right-click the layer, and select Positioning.

    • In Design view, select the layer, point to Format, and select Position.

  2. To specify how you want the page elements to wrap around the layer, in the Position dialog box, under Wrapping style, select a style.

  3. To specify the positioning style of the layer, under Positioning style, select either Absolute or Relative.

    Note

    Setting a layer's Position to a value other than absolute or relative stops Microsoft Expression Web from treating that set of <div> tags as a layer.

  4. To specify the relative position coordinates of the layer, under Location and size, enter values in the Left, Right, Top, and Bottom boxes.

  5. Click OK.

To modify a layer's position by dragging

  • In Design view, point at any side of the layer while avoiding the corner and side handles start dragging when your pointer icon appears as a quadruple-headed arrow, and then drag the layer to the new position.

    Note

    If your layer uses absolute positioning, you can drag the layer to any point on the web page; if your layer uses relative positioning, you can only drag your layer to within a container block.

To modify only a layer's positioning style

  1. In Design view or Code view, put your cursor in the layer you want to position or select the layer.

  2. At the top of the editing window in the Quick Tag Selector bar, point to the <div> tag of the current layer, click the down arrow next to the tag, point to Positioning, and click a positioning style.

See also

Tasks

Resize a layer
Position items on a web page
Set margins, padding, and dimensions in Design view

Reference

Layers panel
Positioning toolbar

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.