Export (0) Print
Expand All

Setting CSS Positioning Attributes

Visual Studio .NET 2003

Positioning attributes control the location on a Web page where an entire element is displayed. If, for example, you have a <DIV> element that includes both text and a picture, you can control the spacing of letters and paragraphs within the <DIV> element with CSS text attributes, while controlling the position of the entire <DIV> element, including the picture, with CSS positioning attributes. You can place elements on your Web page in absolute positions or in positions relative to those of other elements. You also can control the height and width of an element, and set its z-index to make it display in front of or behind other elements.

To prepare to build a CSS positioning style

  1. Open an external CSS style sheet document for editing, and follow the procedures in the topic Building CSS Styles.

    - or -

    Open a Web page for editing in Design view, and follow the procedures in the topic Inserting CSS Styles from the Document Styles Window.

  2. On the Styles menu, choose Build Style.

    The Style Builder dialog box appears.

  3. Choose Position in the left pane.

To set relative positioning attributes

  1. Choose Offset from normal flow from the Position Mode list.
  2. Type values in the Top and Left fields.
  3. Select values in the adjacent unit option drop-down lists.

    Top and Left values can be positive or negative. For example, if you enter a positive Top value and a negative Left value, the styled element would be positioned below its normal position on the page and farther left than normal.

To set absolute positioning attributes

  1. Choose Absolutely position on the Position Mode drop-down list.
  2. Enter values in the Top and Left fields.
  3. Select values in the adjacent unit option drop-down lists.

To set size attributes

  1. Choose an option on the Position Mode list.
  2. Type values in the Height and Width fields.
  3. Select values in the adjacent unit option drop-down lists.

    Height and Width values must be positive.

To set Z-Index attributes

  1. Choose Absolutely position on the Position Mode drop-down list.
  2. Type a value in Z-Index.

    Z-Index is an attribute of absolutely positioned elements. A positive number brings an element forward, on top of elements positioned lower.

    Tip   You can use a negative Z-Index value to position an image as a background, or use a large positive Z-Index value together with Top and Left positioning to make one image overlap another. But use the Z-Index value selectively. You probably will not need to set a Z-Index value for every element on your page.

See Also

Positioning HTML Elements in Design View | Working With CSS Styles | Introduction to Cascading Style Sheets | Building CSS Styles | Adding CSS Style Attributes in Design View | Inserting CSS Styles from the Document Styles Window | Creating an External CSS Style Sheet

Show:
© 2015 Microsoft