Setting Position properties

The Position set  of the CSS Inspector lets you define the positioning properties of any floating item formatted with the style, including position, clipping behavior, rank in the stacking order, overflow behavior, and visibility. Some of the properties in this set are not consistently supported across browsers and platforms. Be sure to test your pages on multiple browsers, browser versions, and platforms to identify problems.

For more information on units, see About relative, absolute, and percentage units.

To edit the positioning properties of a style:

1. Select a style in the CSS Editor. In the Position set  of the CSS Inspector, choose a positioning method from the Kind menu:
• Absolute to specify the position of the floating style item with respect to the upper left corner of the browser window. Choose a unit (preferably pixels) from the Top and Left pop-up menus, and enter numeric values in the Left and Top text boxes.
• Static to let the style item flow with the text.
• Relative to specify the position of the style item with respect to its parent. Choose a unit from the Top and Left menus, and enter numeric values in the Left and Top text boxes.
2. To specify the dimensions of the style item, choose a unit from the Width and Height pop-up menus, and enter numeric values in the Width and Height text boxes.
3. In the Clipping section, to specify where and how the style item is visually cropped when it overlaps with adjacent items, choose a clipping method from the pop-up menu:
• Auto to let the browser determine the clipping properties.
• Inherit to force the style item to inherit the clipping method of its parent.
• Rect to crop the element to a rectangular box. Choose a unit from the Top, Right, Bottom, and Left pop-up menus, and enter a numeric value in the text boxes.
4. To set the stacking order of a floating style item relative to other floating items, in the z-index text box enter a unique numeric value for the layer. If two floating items overlap, the one with the higher z-index value appears on top of the floating item with the lower z-index.
5. To determine how the floating style item behaves if its content outgrows the item's dimensions, in the Overflow pop-up menu choose one of the following properties:
• Visible causes the floating style item to grow with its content.
• Scroll adds a vertical or horizontal scrollbar to the floating style item.
• Hidden hides the portions of content that exceed the floating style items dimensions.
• Auto uses the browser's preferences for handling excessive content.
6. In the Visibility pop-up menu, set the visibility property to determine whether the item is displayed or not when the browser loads the page. The visibility property is useful as an initial setting that scripting will override. Choose one of the following options:
• Inherited assumes the visibility property of the parent item.
• Visible lets you display the floating style item when the browser loads the page.
• Hidden hides the floating style item from view.