Share via

Position, Style Builder Dialog Box

  • Article

The Position page of the Style Builder dialog box makes it possible for you to define cascading style sheet (CSS) positioning attributes. You can either apply these attributes directly to HTML elements or add them to CSS style rules.

To apply positioning attributes directly to HTML elements on your page

  1. Open your HTML document in Design view of the HTML Designer and select the element to format.

  2. Click Style on the Format menu to open the Style Builder dialog box.

  3. Click Position in the left pane of the Style Builder dialog box.

    The Position, Style Builder dialog box appears in the right pane.

When you apply styles to elements selected in Design view, CSS style attributes are inserted inline into the HTML markup for these elements. Switch to HTML view to review the new style attributes inserted.

To add positioning attributes to a CSS style rule defined in an external style sheet

  1. Open an existing external style sheet and place the insertion point within the curly braces ({ }) that follow the selector for the desired style rule.

  2. Click Build Style on the Styles menu to open the Style Builder dialog box.

  3. Click Position in the left pane of the Style Builder dialog box.

    The Position, Style Builder dialog box appears in the right pane.

Note

The Styles menu appears when you open an external CSS style sheet for editing. On the Styles menu, the Build Style option becomes available when you place the insertion point within the curly braces that follow the selector for a style rule.

A CSS style class defined in an external style sheet can be applied to an element within the <BODY> element of a Web page by assigning the CSS style selector as the CLASS property for the element.

Options available on the Position page of the Style Builder dialog box include the following.

Tasks

UI Elements

Position Mode

Sets the mode that determines which subsequent positioning fields become available. Select one of the following options from the drop-down list.

  • <Not Set>
    When the attribute is <Not Set>, no code is added to the style.

  • Position in normal flow
    Does not change the position of the element; height and width can be specified. If you choose Position in normal flow, the following CSS markup is inserted:

    POSITION:static

    Note

    The preview area adjacent to the Position Mode selector is updated to reflect the mode selections.

  • Offset from normal flow
    Makes it possible for you to specify top and left positions for an element relative to its position in the normal flow; height and width can be specified. An element's normal flow is its position before the style is applied. If you choose Offset from normal flow, the following CSS markup is inserted:

    POSITION:relative

  • Absolutely position
    Makes it possible for you to specify absolute top position, absolute left position, Z-index, height, and width for an element. Typically, you absolutely position elements that you want to anchor to a specific position. For example, you might absolutely position a logo so that is does not move as you add and edit other elements. If you choose Absolutely position, the following CSS markup is inserted:

    POSITION:absolute

If you select a position mode, the following options are available.

  • Top
    Sets the top position of an element, either as an absolute value or as a value relative to its position in the normal flow. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px. For example, if you type 5 and then accept the default unit option, the following CSS markup is inserted:

    TOP:5px

    Note

    This option is available when you selectOffset from normal flow from the Position mode list.

  • Left
    Sets the left position of an element, either as an absolute value or as a value relative to its position in the normal flow. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px. For example, if you type 5 and then accept the default unit option, the following CSS markup is inserted:

    LEFT:5px

    Note

    This option is available when you choose Offset from normal flow from the Position mode list.

  • Height
    Sets the height of an element. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px. For example, if you type 5 and then accept the default unit option, the following CSS markup is inserted:

    HEIGHT:5px

  • Width
    Sets the width of an element. Enter a value and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %). The default unit option is px. For example, if you type 5 and then accept the default unit option, the following CSS markup is inserted:

    WIDTH:5px

  • Z-Index
    Sets the z-order for an element. The z-order controls the display of overlapped elements; elements with higher z-order values are displayed in front of those with lower z-order values. To move the element higher in the z-order, enter a positive number to produce a result such as the following example:

    Z-INDEX:99

    Note

    To move the element lower in the z-order, enter a smaller or negative number.

    Note

    Z-Index and position are related. If you have entered position values that cause elements to overlap, you can control which element appears on top of the other by assigning appropriate Z-Index values. Assign a higher Z-Index value to the element that you want to appear on top of the other element.

See Also

Concepts

Working with CSS Overview

Reference

Background, Style Builder Dialog Box

Font, Style Builder Dialog Box

Text, Style Builder Dialog Box

Layout, Style Builder Dialog Box

Edges, Style Builder Dialog Box

Lists, Style Builder Dialog Box

Color Picker Dialog Box

Other Resources

Other, Style Builder Dialog Box