Posicionando Elementos no Modo Design

Artigo
08/25/2010

Quando você cria páginas HTML ou páginas da Web do ASP.NET no designer de HTML, os elementos são posicionados fisicamente de cima para baixo.Por padrão, quando a página é processada pelo navegador, os elementos são processados na mesma ordem de cima para baixo.Isso é chamado às vezes de layout de fluxo.

Você também pode organizar elementos em duas dimensões, posicionando elementos com coordenadas horizontal e vertical em qualquer lugar na página.Esta opção de layout tira proveito das opções de posicionamento que estão disponíveis através de estilos.

No modo de exibição Design, você pode arrastar elementos para posicioná-los na página, e você pode selecionar elementos e aplicar opções de posicionamento a eles.No modo de modo de exibição de Design, a página exibe os elementos no local para a que posição, em seguida.Você pode arrastar elementos pelo seu identificador de guia para reposicionar.No modo de exibição Source, você pode definir opções de posicionamento na marcação de elementos individuais.

Quando a página é processada, o navegador exibe os elementos usando as informações de posicionamento que você especificar.

Layout de fluxo

Se elementos não tiverem nenhuma propriedade 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 contêiner do elemento elemento de ou da configuração de linguagem do navegador. Qualquer navegador da Web pode exibir documentos HTML que utilizem esse layout.Às vezes elementos são reposicionados quando a página é redimensionada.

Se você usar layout de fluxo para sua página, você pode alinhar elementos dentro de um table elemento ou use um div elemento com posicionamento de estilo ou propriedades de alinhamento de texto. Entretanto elementos não podem se sobreporem.Os elementos poderão mover quando a página for redimensionada, de acordo com que se você utilizar unidades absolutas ou porcentagens para as larguras da tabela e das células.

Posicionamento bidimensional

Você pode aplicar opções de posicionamento a elementos individuais, o que permite a você posicionar elementos em locais precisos na página.

Você pode especificar opções de posicionamento para novos elementos que você adicionar à página.

A ferramenta de desenvolvimento da Web, o Microsoft Visual Web Developer, permite que você especifique opções de posicionamento que correspondem às opções que estão definidas na especificação W3C para folhas de estilos em cascata.As opções de posicionamento são válidas em qualquer navegador que implemente o padrão W3C HTML 4.0, incluindo aqueles que oferecem suporte a XHTML 1.1.

As opções são as seguintes:

absolute

O elemento é processado para um local na página definido por qualquer combinação do left, right, top, e bottom Propriedades de estilo. A posição 0,0 é definida com base no pai do elemento corrente.O pai é o primeiro elemento de contêiner com informações de posicionamento.Por exemplo, se o elemento corrente estiver dentro de um div elemento com posicionamento informações, posicionamento absoluto é calculado com base na posição para a div elemento. Se o elemento corrente não tiver nenhum elemento de contêiner com posicionamento, as informações de posicionamento são calculadas com base na 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 de absolute a posição 0,0 é definida em relação a onde o elemento está no fluxo da página. Um elemento com posicionamento relativo e top e left definidas sistema autônomo 0, aparecem no fluxo sistema autônomo normal.

Observação:
Elementos que usam posicionamento absoluto ou relativo podem aparecer na página fora de ordem em relação à sua declaração na marcação da página, o que pode ser confuso.Por exemplo, no modo de exibição Source você pode definir um botão como o primeiro elemento na marcação, mas depois que definir seu posicionamento, o botão pode ser exibido como o último elemento na página processada ou no modo de exibição Design.

Elementos que usam posicionamento absoluto ou relativo podem aparecer na página fora de ordem em relação à sua declaração na marcação da página, o que pode ser confuso.Por exemplo, no modo de exibição Source você pode definir um botão como o primeiro elemento na marcação, mas depois que definir seu posicionamento, o botão pode ser exibido como o último elemento na página processada ou no modo de exibição Design.

static

O elemento é processado usando layout de fluxo; ou seja, o elemento não usa posicionamento bidimensional.Você pode selecionar esta opção se você deseja definir uma opção de posicionamento em um controle individual que substitui uma configuração que é herdada de um tema ou folha de estilo.

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 ou de controles que podem ser adicionados no futuro de posicionamento existentes.

Posicionando texto estático ou grupos de elementos

Para permitir que você criar texto estático flutuante ou grupos de elementos sistema autônomo uma unidade, você pode adicionar uma camada para a página.Uma camada é um div elemento com posicionamento informações incluídas, que permite que você arrastá-la ao redor da página. E, em seguida, você pode digitar texto ou arrastar elementos para o div elemento. O Visual Web Developer inclui um comando no Formato menu para adicionar uma camada ou você pode criar o div elemento sozinho e adicionar informações de posicionamento a ele manualmente.

Restringindo posições a uma grade

Se você estiver usando absoluto ou posicionamento relativo, e se você estiver usando pixels sistema autônomo base para posicionamento (isto é, sistema autônomo unidades para o left e top sistema autônomo propriedades são pixels), você pode conjunto uma opção para ajustar elementos a uma grade invisível. Isso ajuda você a alinhar elementos na página.Para obter detalhes, consulte:Caixa de diálogo Opções de posicionamento, designer HTML, CSS.

Posicionando elementos em camadas

Se você estiver usando posicionamento absoluto ou relativo, você pode sobrepor elementos, e depois eles serão reproduzidos no navegador sobrepostos.Se você posicionar elementos usando uma tabela, você não pode sobrepor objetos.

Elementos com posicionamento absoluto ou relativo podem incluir um z-index propriedade que especifica a ordem, de volta para a frente, do elemento em uma terceira dimensão. Se dois elementos compartilham o mesmo espaço, o elemento com o maior valor de atributo do índice z é exibido na frente.Se você usar comandos no modo de exibição de Design para conjunto o posicionamento, a z-index propriedade é definida automaticamente, iniciando com 100 para o elemento mais atrás. Se você adicionar propriedades de posicionamento no modo de exibição fonte, você deve adicionar o z-index propriedade manualmente.