Formas de posicionamento

Este tópico descreve o VML, um recurso que é preterido a partir de Windows Internet Explorer 9. Páginas da Web e aplicativos que dependem de VML devem ser migrados para o SVG ou outros padrões amplamente compatíveis.

Observação

Desde dezembro de 2011, este tópico foi arquivado. Como resultado, ele não é mais mantido ativamente. Para obter mais informações, consulte Conteúdo Arquivado. Para obter informações, recomendações e diretrizes sobre a versão atual do Windows Internet Explorer, consulte o Centro de Desenvolvedores do Internet Explorer.

 

Você aprendeu a desenhar e colorir formas em uma página da Web usando VML. Neste tópico, você usará o VML para posicionar precisamente os gráficos em uma página da Web.

O VML usa a mesma sintaxe definida nas seções Modelo de Caixa e Modelo de Renderização Visual do CSS2 para posicionar formas em uma página da Web. Você pode usar estático, relativo ou absoluto para determinar onde o ponto base está localizado em uma página da Web. Em seguida, você pode usar os atributos de estilo superior e esquerdo para especificar o deslocamento do ponto base no qual a caixa de contenção da forma será posicionada.

Você também pode usar o índice z para especificar a ordem z das formas em uma página da Web.

Além disso, o VML fornece rotação e inverter para girar ou inverter formas.

Neste tópico:

static

O estilo de posição padrão é estático, o que instrui os navegadores a posicionar a forma no ponto atual (o ponto base) no fluxo de texto e ignorar as configurações nos atributos de estilo superior e esquerdo .

Por exemplo, na seguinte representação VML, o oval vermelho é posicionado imediatamente após o texto "Início da forma:", conforme mostrado na seguinte imagem:

shape1-ps.gif (2123 bytes)

<body>
Beginning of the shape:
<v:oval style='width:80pt;height:90pt' fillcolor="red" />
End.
</body>

back to top De volta ao topo

relative

Definir o atributo de estilo de posição como "relativo" permite que você coloque a caixa de contenção com um deslocamento do ponto atual (o ponto base) no fluxo de texto. O deslocamento é determinado pelas configurações nos atributos de estilo superior e esquerdo . Lembre-se de que a caixa de contenção que está posicionada como relativa ocupa espaço no fluxo de texto.

Por exemplo, na seguinte representação VML, o oval vermelho é posicionado a 20 pontos da esquerda e 10 pontos da parte superior em relação ao ponto atual no fluxo de texto, conforme mostrado na imagem a seguir:

shape3.gif (2048 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;width:80pt;
height:90pt;' fillcolor="red" />
End.
</body>

back to top De volta ao topo

absoluto

Definir o atributo de estilo de posição como "absoluto" permite que você coloque a caixa contendo uma distância exata do canto superior esquerdo (o ponto base) de seu elemento pai (o elemento posicionado que contém a forma). Lembre-se de que a caixa de contenção que está posicionada como absoluta não ocupará espaço no fluxo de texto.

Por exemplo, na seguinte representação VML, o oval vermelho está contido dentro do <body> elemento (a página da Web inteira); portanto, o ponto base está no canto superior esquerdo da página da Web. A caixa de contenção para o oval é posicionada exatamente 20 pontos da esquerda e 10 pontos da parte superior, em relação ao canto superior esquerdo da página da Web, conforme mostrado na imagem a seguir:

shape2.gif (2006 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt
width:80pt; height:90pt;' fillcolor="red" />
End.
</body>

back to top De volta ao topo

z-index

É possível posicionar uma forma que se sobreponha a outra forma. Normalmente, o gráfico listado por último no código HTML aparece na parte superior.

No VML, você pode controlar a ordem z usando o atributo estilo z-index . O valor desse atributo pode ser zero, um inteiro positivo ou um inteiro negativo. O gráfico que tem um valor de índice z maior é exibido na parte superior do gráfico que tem um valor de índice z menor. Quando ambos os gráficos têm o mesmo valor de índice z, o gráfico listado por último no código HTML aparece na parte superior.

Por exemplo, na representação VML a seguir, o oval vermelho é exibido em cima do retângulo azul. Isso ocorre porque o valor de índice z do oval vermelho é maior que o valor de índice z do retângulo azul.

shape4.gif (572 bytes)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index: 1'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt; z-index:0' fillcolor="blue" />

Se você alterar o índice z, conforme mostrado na representação VML a seguir, o oval vermelho se moveria para trás do retângulo azul.

shape5.gif (469 bytes)

<v:oval
style='position:relative;left:10pt;top:20pt;width:100pt; height:80pt;z-index:0'
fillcolor="red" />
<v:rect style='position:relative;left:10pt;top:45pt;width:100pt; height:80pt;z-index:1'
fillcolor="blue" />

Se você fornecer um inteiro negativo, poderá usar o índice z para posicionar os gráficos atrás do fluxo de texto normal, conforme mostrado na representação VML a seguir.

shape6.gif (2125 bytes)

<body>
Beginning of the shape:
<v:oval style='position:relative;left:20pt;top:10pt;z-index:-1;
width:80pt;height:90pt;' fillcolor="red" />
End.
</body>

back to top De volta ao topo

rotação

Você pode usar o atributo de estilo de rotação para especificar quantos graus deseja que uma forma ative seu eixo. Um valor positivo indica uma rotação no sentido horário; um valor negativo indica uma rotação no sentido anti-horário.

Por exemplo, se você especificar style='... rotation:90', você pode girar a forma 90 graus no sentido horário.

back to top De volta ao topo

flip

Você pode usar o atributo de estilo flip para inverter uma forma em seu eixo x ou y de acordo com a tabela a seguir:

Valor Descrição
x Inverter a forma girada sobre o eixo y (inverter x ordenações)
s Inverter a forma girada sobre o eixo x (inverter y ordena)

 

X e y podem ser especificados na propriedade flip.

Por exemplo, se você digitar style='... flip:x y', você inverte a forma em seu eixo x e y.

back to top De volta ao topo

Resumo

Com base no que você aprendeu, você pode posicionar precisamente uma forma em uma página da Web seguindo estas etapas:

  1. Decida onde deseja que a forma apareça em uma página da Web e o tamanho da forma.
  2. Especifique style='position:relative (ou relative)' para determinar o ponto base.
  3. Use a esquerda e a parte superior para especificar o deslocamento do ponto base.
  4. Use largura e altura para especificar o tamanho da caixa de contenção para a forma.
  5. Use z-index para especificar a ordem z da forma.