CSS Positioning, HTML Designer, Options Dialog Box

The CSS Positioning page sets options that determine how elements are positioned in Design view when you create them using any of these methods:

  • Dragging the element from the Toolbox.

  • Dragging the element from another source, such as another page.

  • Pasting an element that you previously copied to the Clipboard.

To access this dialog box

  1. In Microsoft Visual Web Developer, click Tools, and then click Options.

    The Options dialog box opens.

  2. In the left panel, expand the HTML Designer node, and click CSS Positioning.

    If you have configured your environment settings for Web development, the elements of this node are not available unless you select the Show all settings check box. For more information about environment settings, see How to: Change Select Settings.

Note

Additional HTML options can be found under the Text Editor, HTML node, which is visible if the Show all settings check box is selected.

For more information about formatting HTML, see Formatting Elements in the HTML Editor in Visual Web Developer.

Tasks

UI Elements

Positioning Options

  • Change positioning to the following for controls added using the Toolbox, paste, or drag and drop
    Specifies the default cascading style sheet (CSS) positioning option for elements you drop or paste onto the page in Design view. Positioning information is specified using the position property of an element's style attribute.

    This setting has no effect in Source view.

    If you clear the check box, the editor drops or pastes elements exactly as they are defined in the Toolbox or other source, or as they were copied to the Clipboard, without any change to the element's positioning attributes. If you select the check box, when you paste or drag, the editor sets the element's positioning attributes according to the option you select.

    Value

    Description

    Absolutely positioned

    The editor sets the position property to absolute and sets the z-index, left, and top style properties. The 0,0 position is defined based on the current element's parent. The parent is the first container element that has positioning information. If the current element has no container element with positioning, the positioning information is calculated based on the body element.

    Relatively positioned

    The editor sets the position property to relative and sets the z-index, left, and top style properties. This option differs from Absolutely positioned in that the 0,0 position is defined with respect to where the element is in the flow of the page. An element with relative positioning and top and left both set to 0 appears in flow as normal.

    Statically positioned

    The editor sets the position property to static. The effect is that the control is rendered using flow layout. Setting a position to static is useful if you want to explicitly override style settings that the element might inherit from a cascading style sheet.

    No positioning attribute

    The editor removes any positioning information. The effect is that the control is rendered by default using flow layout. The control's positioning might be affected by a style setting inherited from a cascading style sheet.

    For details about the effect of the position attribute, search for "position attribute" or "position property" in the MSDN Library.

  • Snap pixel-based positions and sizes to the following setting
    Constrains dragging to an invisible grid whose spacing you set. The setting applies only to elements in which positioning information is set in pixels.

    Note

    You can drag elements that do not have positioning information, or in which the position property is set to static. However, you can drag them only within the flow of the document, not to arbitrary locations on the page.

  • Horizontal spacing
    The number of pixels between horizontal stops on the invisible grid.

  • Vertical spacing
    The number of pixels between vertical stops on the invisible grid.

See Also

Concepts

Positioning Elements in Design View