Positioning Elements in Design View

Article
09/30/2015

When you create HTML pages or ASP.NET Web pages in the HTML designer, the elements are physically laid out from top to bottom. By default, when the page is rendered to the browser, the elements are rendered in the same top-to-bottom order. This is sometimes referred to as flow layout.

You can also lay out elements two-dimensionally, by positioning elements with horizontal and vertical coordinates anywhere on the page. This layout option takes advantage of the positioning options that are available through styles.

In Design view, you can drag elements to position them on the page and you can select elements and apply positioning options to them. In Design view, the page displays the elements at the location you position then. You can drag elements by their tab handle to reposition. In Source view, you can set positioning options in the markup for individual elements.

When the page is rendered, the browser displays the elements using the positioning information that you specify.

Flow Layout

If elements do not have any positioning style properties, they flow from top to bottom within the page, and either from left to right or right to left, depending on the setting of the dir attribute of the page or the element's container element or of the language setting for the browser. Any Web browser can display HTML documents that use this layout. Elements are sometimes be repositioned when the page is resized.

If you use flow layout for your page, you can align elements inside a table element, or use a div element with positioning style or text-align properties. However, elements cannot overlap. The elements might move as the page is resized, according to whether you use absolute units or percentages for the table and cell widths.

Two-Dimensional Positioning

You can apply positioning options to individual elements, which allows you to place elements at precise locations on the page.

You can also specify positioning options for any new elements you add to the page.

The Microsoft Visual Web Developer Web development tool allows you to specify positioning options that correspond to those that are defined in the W3C specification for cascading style sheets. The positioning options are valid in any browser that implements the W3C HTML 4.0 standard, including those that support XHTML 1.1.

The options are as follows:

absolute

The element is rendered to a location in the page defined by any combination of the left, right, top, and bottom style properties. The 0,0 position is defined based on the parent of the current element. The parent is the first container element that has positioning information. For example, if the current element is inside a div element with positioning information, absolute positioning is calculated based on the position for the div element. If the current element has no container element with positioning, the positioning information is calculated based on the body element.
relative

The element is rendered to a location in the page that is defined by the left and top style properties. This option differs from absolute 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 the flow as normal.

Note

Elements that use absolute or relative positioning can appear on the page out of order with respect to their declaration in the markup of the page, which can be confusing. For example, in Source view you might define a button as the first element in the markup, but after you set its positioning, the button might appear as the last element in the rendered page or in Design view.
static

The element is rendered using flow layout; that is, the element does not use two-dimensional positioning. You might select this option if you want to set a positioning option on an individual control that overrides a setting that is inherited from a theme or style sheet.

Visual Web Developer also offers the positioning option Not Set, which allows you to remove any existing positioning information from an individual control or from controls that may be added in future.

Positioning Static Text or Groups of Elements

To enable you to creating floating static text or groups of elements as a unit, you can add a layer to the page. A layer is a div element with positioning information included, which allows you to drag it around in the page. You can then type text or drag elements into the div element. Visual Web Developer includes a command on the Format menu to add a layer, or you can create the div element yourself and add positioning information to it manually.

Constraining Positions to a Grid

If you are using absolute or relative positioning, and if you are using pixels as the basis for positioning (that is, the units for the left and top properties are pixels), you can set an option to snap elements to an invisible grid. This helps you align elements on the page. For details, see Ruler and Grid, HTML Designer, Options Dialog Box.

Layering Elements

If you are using absolute or relative positioning, you can overlap elements, and then they will be rendered in the browser as overlapped. If you position elements using a table, you cannot overlap objects.

Elements with absolute or relative positioning can include a z-index property that specifies the order, back to front, of the element in a third dimension. If two elements share the same space, the element with the higher z-index attribute value is displayed in front. If you use commands in Design view to set positioning, the z-index property is set automatically, starting with 100 for the back-most element. If you add positioning properties in Source view, you must add the z-index property manually.

Share via