Posicionando Elementos no Modo Design
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. No modo Design, a página exibe os elementos no local em que você os posicionar. Você pode arrastar elementos pelo seu identificador de guia para reposicionar. 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
Se elementos não possuem quaisquer propriedades de estilo de posicionamento, eles são posicionados de cima para baixo dentro da página e da esquerda para a direita ou da direita para a esquerda, dependendo da configuração do dir atributo da página ou elemento de contêiner do elemento ou da configuração de idioma do navegador. Any Web browser can display HTML documents that use this layout. Elements are sometimes be repositioned when the page is resized.
Se você usar um layout de fluxo para sua página, você pode alinhar elementos dentro de um table elemento ou usar um div elemento com posicionamento de estilo ou text-align propriedades. 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
O elemento é processado para um local na página definido por qualquer combinação da left, right, top, e bottom Propriedades de estilo. A posição 0,0 é definida com base no pai do elemento atual. O pai é o primeiro elemento de contêiner que tem informações de posicionamento. Por exemplo, se o elemento atual está dentro de um div elemento com posicionamento, informações de posicionamento absoluto é calculado com base na posição para a div elemento. Se o elemento atual não tiver nenhum elemento de contêiner com posicionamento, as informações de posicionamento são calculadas com base no body elemento.
relative
O elemento é processado para um local na página que é definido pelo left e top Propriedades de estilo. Essa opção difere da absolute a posição 0,0 é definida com relação a onde o elemento está no fluxo da página. Um elemento com posicionamento relativo e top e left definidas como 0, aparecem no fluxo como normal.
Dica
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.
O Visual Web Developer também oferece a opção de posicionamento Not Set, que permite que você remova quaisquer informações de um controle individual de posicionamento existentes ou de controles que podem ser adicionados no futuro.
Positioning Static Text or Groups of Elements
Para permitir que você criar texto estático flutuante ou grupos de elementos como uma unidade, você pode adicionar uma camada para a página. Uma camada é um div o elemento com informações de posicionamento incluídas, que permite que você arraste ao redor na página. Você pode digitar texto ou arrastar elementos para o div elemento. Visual Web Developer inclui um comando na formato menu para adicionar uma camada, ou você pode criar o div elemento sozinho e adicionar informações de posicionamento a ele manualmente.
Constraining Positions to a Grid
Se você estiver usando posicionamento absoluto ou relativo, e se você estiver usando pixels como base para posicionamento (isto é, as unidades para o left e top propriedades são pixels), você pode definir uma opção para ajustar elementos a uma grade invisível. This helps you align elements on the page. For details, see CSS Positioning, 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.
Elementos com posicionamento absoluto ou relativo podem incluir um z-index propriedade que especifica a ordem, de trás para frente, do elemento em uma terceira dimensão. If two elements share the same space, the element with the higher z-index attribute value is displayed in front. Se você usar comandos no modo de Design para definir o posicionamento, a z-index propriedade é definida automaticamente, iniciando com 100 para o elemento mais atrás. Se você adiciona propriedades de posicionamento no modo Source, você deve adicionar o z-index propriedade manualmente.
Consulte também
Tarefas
Como: posicionar elementos no modo de exibição Design
Referência
Validação, HTML, Editor de texto, caixa de diálogo Opções