New Style Dialog Box, Position
The Position category of the New Style and Modify Style dialog box enables you to define cascading style sheet (CSS) style rules for the position of UI elements on a Web page. You can apply these style rules directly to HTML elements or add them either to the current page or to an external style sheet.
To define a CSS position style rule for UI elements on the current page
Open the page in either Design view or Source view.
Optionally, select the text or HTML elements to apply the style to.
In the Format menu, click New Style.
The New Style dialog box is displayed.
In the Category pane, select Position.
The position style selections are displayed in the right pane.
When you apply styles to selected text in Design view, style attributes are inserted inline into the HTML markup for the page. Switch to Source view to review the new style attributes.
To add position attributes to a CSS style rule defined in an external style sheet
Open an existing external style sheet.
Put the cursor inside the braces of the style rule to be modified.
In the Styles menu, click Build Style.
The Modify Style dialog box is displayed.
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 put the cursor inside the braces that follow the selector for a style rule.
In the left pane, click Position.
The position style selections appear in the right pane.
The following tables list options that are available under the Position category in the New Style and Modify Style dialog boxes.
Position Options
position
The algorithm to use to put an element on a Web page. Values are as follows:absolute The element's position is specified by using the top, right, bottom, and left properties. These properties are relative to the containing block.
fixed The element's position is specified by using the top, right, bottom, and left properties. These properties are relative to the browser window. The element does not scroll with the Web page.
relative The element's position is calculated according to the normal flow and then offset by using the top, right, bottom, and left properties. The offset is relative to the element's normal position.
static The element's position is calculated according to the normal flow. The top, right, bottom, and left properties are ignored. This is the default.
inherit The element inherits its positioning algorithm from a parent element.
z-index
The stack level of an element. An element that has a higher stack level appears in front of elements that have lower stack levels.width
The width of an element. If you specify a value, you can select the value units in the list.height
The height of an element. If you specify a value, you can select the value units in the list.top
The top edge of an element. If the position property is set to static, this property is ignored. If you specify a value, you can select the value units in the list.right
The right edge of an element. If the position property is set to static, this property is ignored. If you specify a value, you can select the value units in the list.bottom
The bottom edge of an element. If the position property is set to static, this property is ignored. If you specify a value, you can select the value units in the list.left
The left edge of an element. If the position property is set to static, this property is ignored. If you specify a value, you can select the value units in the list.
Other UI Elements
Selector
(New Style dialog box only) Enables you to type a class name or click an HTML element to apply the style to. Class names must begin with a period (.). You can also select (inline style), which causes the style to be applied inline to the selected text or HTML elements.Define in
(New Style dialog box only) Enables you to specify where to write the definition of the style rule. Values are as follows:Current page The style rule is written to a style element in the current page.
New style sheet A new CSS style sheet is added to the project and the rule is written in it.
Existing style sheet The style rule is added to the CSS style sheet that you specify by using the URL list.
URL
(New Style dialog box only) Enables you to select an existing CSS style sheet. This option is enabled only when Define in is set to Existing style sheet.Apply new style to document selection
(New Style dialog box only) Specifies that the style is applied to the selected text, class, or HTML element.Preview
Displays an example of how the style rule will appear when it is applied.Description
Shows the CSS definition of the style rule.