Share via

Position, Style Builder Dialog Box

  • Article

The Position page of the Style Builder dialog box makes it possible for you to define 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, open your HTML document in Design view of the HTML Designer and select an element to format. Then choose Build Style from the Format menu to open the Style Builder dialog box, and select the Position option in the left pane.

Note   The Build Style option on the Format menu becomes available when you open an HTML document in Design view and set its targetSchema property to a Web browser that supports HTML 4.0 or later and CSS styles.

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, place the cursor within the curly braces that follow the selector for the style rule. Then choose Build Style from the Styles menu to open the Style Builder dialog box, and select the Position option in the left 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 cursor 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> 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:

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 position of 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 updates 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. You typically 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

  • 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

  • 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, for example.

Z-INDEX:99

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

Introduction to Cascading Style Sheets | Working With CSS Styles | 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 | Other, Style Builder Dialog Box | Color Picker Dialog Box