Como codificar uma sobreposição DIV

Escrito por kevin lee | Traduzido por rodrigo castilhos
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como codificar uma sobreposição DIV
As sobreposições permitem que vários objetos ocupem o mesmo espaço em uma página (Jupiterimages/Polka Dot/Getty Images)

O Cascading Style Sheet, ou CSS, permite-lhe posicionar objetos sobre outros objetos em uma página da Web. Os elementos DIV - que contêm outros elementos HTML - são ideais para o posicionamento CSS. Use as sobreposições para destacar itens importantes de um página da Web. Também é possível criar sobreposições que fazem com que o texto ou as imagens apareçam em qualquer lugar da página quando seu aplicativo Web é executado. A propriedade de posicionamento da CSS "absolute" (absoluto) possibilita o processo de sobreposição.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra um dos documentos da sua página da Web usando um editor HTML ou o "Bloco de notas". Escolha um documento que contém vários elementos, como imagens, parágrafos ou títulos. Esses servirão como pano de fundo para a sobreposição DIV que você irá criar.

  2. 2

    Encontre a seção "<body>" do documento e cole o seguinte código HTML nela:

    <div id="div1" class="divOverlay"> This is an Overlay Div --> </div>

    <input type="button" value=”Click to Overlay onclick="return ShowOverlay('div1', 100, 200)" /></p>

    Isso cria um DIV com um ID "div1" - isso faz referência a uma classe de CSS chamada "divOverlay". O botão abaixo do DIV chama a função "ShowOverlay" do JavaScript - isso passa o ID do DIV para a função, bem como as coordenadas "x" e "y" de onde você quer que o DIV apareça na página da Web. Neste exemplo, o valor da coordenada "x" é "100" e da coordenada "y" é "200".

  3. 3

    Adicione este código CSS à seção "<head>" do documento:

    <style type="text/css"> .divOverlay {top:0px; left:0px; position:absolute; visibility:hidden; z-index:500;} </style

    Isso cria a classe da CSS "divOverlay" descrita anteriormente. Os valores posicionados no topo e à esquerda da sobreposição têm zero pixels no topo e à esquerda da página da Web. A propriedade de posicionamento dos valores"absolute" (absoluto) permite que os navegadores movam qualquer elemento referente à classe. A propriedade z-index determina como um navegador "empilha" um elemento. Um elemento da página com um valor z-index baixo, como "3", aparecerá atrás de um elemento com valor z-index mais alto. Usar um valor muito grande - "500", por exemplo - garante que sua sobreposição DIV apareça na frente de todos os objetos em vez de atrás deles. Observe que o valor de visibilidade da classe está "escondido" - isso torna o DIV invisível enquanto a página carrega.

  4. 4

    Cole o seguinte código JavaScript abaixo do código CSS descrito no passo anterior:

    <script language="javascript" type="text/javascript">

    function ShowOverlay(divID, xCoordinate, yCoordinate) { var divObject = document.getElementById(divID); divObject.style.visibility = "visible"; divObject.style.left = xCoordinate; divObject.style.top = yCoordinate; }

    </script>

    Essa é função "ShowOverlay" chamada quando você clica no botão. Ela recebe o ID do DIV e as coordenadas de localização do "x" e do "y" passadas pela clique do botão. Em seguida, o código torna o DIV visível e move-o para as coordenadas desejadas.

  5. 5

    Salve seu documento e observe-o em um navegador de Internet. Clique no botão "Click to Overlay Div". O DIV aparece, move-se para as coordenadas especificadas no código e sobrepõe qualquer objeto que apareça abaixo dele na página da Web.

Dicas & Advertências

  • Ao chamar o "ShowOverlay", certifique-se de passar o ID da sua sobreposição DIV e das coordenadas "x" e "y" da tela. É possível chamar essa função a qualquer momento, mesmo depois que a página carregue. Isso faz com que a sobreposição apareça quando um usuário vê a sua página pela primeira vez.
  • O DIV desse exemplo contém texto, mas você pode colocar qualquer elemento que desejar nas tags DIV. Por exemplo, para sobrepor uma seta sobre algum objeto da sua página, encontre a imagem de uma seta e adicione sua tag "Img" ao DIV. A seta se moverá para a localização desejada na página quando a função em JavaScript for chamada.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível