×
Loading ...

Como colocar uma div sobre outra

Você pode criar alguns efeitos impressionantes para o seu site usando apenas algumas propriedades CSS e contentores DIV. DIVs são recipientes usados ​​para a posição, estilo e manipulação do conteúdo da página web. Junto com os efeitos mais comuns, como menus horizontais e efeitos de texto, você também pode posicionar um recipiente DIV sobre um outro recipiente DIV. Ele trabalha fazendo a primeira DIV se sobrepor sobre a segunda, usando um valor negativo para a do "top" ou "left" da segunda DIV. A ordem de empilhamento é definida pela propriedade "z-index".

Instruções

Você pode criar alguns efeitos impressionantes para o seu site usando apenas algumas propriedades CSS (Comstock/Stockbyte/Getty Images)
  1. Abra um documento de página web em uma página HTML ou editor de texto. Para abrir o documento da página no editor de texto padrão do Windows, clique com o botão direito no arquivo e clique em "Abrir com". Selecione "bloco de notas" ou "WordPad", clique em "OK".

    Loading...
  2. Clique para colocar o cursor entre as tags ">" e "".

  3. Digite "

    " para criar o primeiro recipiente DIV com a propriedade "position" definida como "relative" e o "z-index" definido para "1". O recipiente DIV com a maior propriedade "z-index" será exibida na parte superior. Pressione "Enter".

  4. Digite ou cole todo o conteúdo que você deseja que apareça no primeiro recipiente DIV e digite "

    " para fechar a primeira tag DIV.

  • Digite "

    " para criar o segundo recipiente DIV. A propriedade "position" será definida como "relative" (o mesmo que o primeiro recipiente DIV) enquanto a propriedade "top" será definida como "-50", que fará com que o segundo recipiente DIV se sobreponha ao primeiro. A propriedade "left" é definida como "0", o que significa que a borda esquerda da segunda DIV irá alinhar-se com a borda esquerda da primeira DIV. A propriedade "z-index" será definida como "2", o que significa que a segunda DIV aparecerá no topo do primeiro recipiente DIV.

  • Digite ou cole todo o conteúdo que você deseja que apareça no segundo recipiente DIV e digite "

    " para fechar a segunda tag DIV.

  • Edite as propriedades "top" e "left" no passo 5 para mudar a posição do segundo recipiente DIV sobre o primeiro recipiente.

  • Clique no menu "File" (Arquivo) e clique em "Save" (Salvar).

  • Loading...

    Referências

    Loading ...
    Loading ...
    Loading ...
    Loading ...
    Loading ...