WDD 130: Fundamentos da Web

S03 Atividades de Aprendizagem: Layout do CSS – Posição

Visão Geral

Os elementos são posicionados em um documento usando o fluxo normal por padrão. Às vezes, o layout exige que os itens sejam colocados em posições absolutas ou fixas. Pode ser tentador usar posicionamento absoluto para tudo em uma página, porque você pode especificar exatamente onde cada item deve estar. Contudo, isso geralmente causa resultados indesejados, principalmente se o conteúdo da página for alterado ou se ela for visualizada em dispositivos diferentes.

Como posições absolutas ou fixas podem levar a resultados inesperados, você deve limitar o uso delas e, quando usá-las, aplique-as apenas em áreas específicas, e não em todo o documento.

O exemplo abaixo mostra como usar a propriedade position para sobrepor os textos "O Salvador amou.", "Ele compartilhou." e "E convidou." sobre uma imagem no mesmo contêiner HTML:

Preparação

O posicionamento CSS permite controlar exatamente onde os elementos aparecem em uma página da web. Os três principais tipos de posicionamento em CSS são posicionamento relativo, posicionamento absoluto e posicionamento fixo. Compreender como esses elementos funcionam em conjunto ajuda você a criar layouts precisos e elementos interativos.

Todos os métodos de posicionamento usam as mesmas quatro propriedades para definir a localização: top, bottom, left e right. Elas informam ao navegador a distância que o elemento deve ser movido a partir de cada extremidade do seu ponto de referência.

Posicionamento Relativo

Ao usar position: relative, o elemento é movido de sua posição normal, mas ainda ocupa seu espaço original no fluxo do documento. Imagine que você está movendo um livro sobre uma mesa, sem mudar o lugar onde ele estava inicialmente. Outros elementos não se moverão para o espaço que o elemento posicionado relativamente ocupava originalmente.

• Mantém o espaço inicial no fluxo do documento – Os demais elementos permanecem em suas posições normais.
• Move-se em relação à sua posição normal – Utiliza o ponto onde o elemento apareceria naturalmente como ponto de partida.
• Cria um contexto de posicionamento para os elementos filhos – Elementos filhos com posicionamento absoluto usarão isso como ponto de referência.
• Pode sobrepor-se a outros elementos – Pode cobrir outros conteúdos quando movido de sua localização original.

O exemplo a seguir move o texto 10 pixels para baixo e 20 pixels para a direita de onde apareceria normalmente, mas os demais elementos continuam se comportando como se o texto estivesse em sua posição original.

.texto-mudado {
  position: relative;
  top: 10px;
  left: 20px;
  background-color: yellow;
}

Posicionamento Absoluto

Ao usar position: absolute, o elemento é posicionado em relação ao elemento pai mais próximo. Se nenhum elemento pai tiver o posicionamento definido, o elemento será posicionado em relação a todo o corpo da página web. O elemento é removido do fluxo normal do documento, ou seja, os outros elementos se comportarão como se ele não existisse.

• Remove o elemento do fluxo do documento – Outros elementos preenchem o espaço como se o elemento posicionado não existisse.
• Posicionado em relação ao elemento pai mais próximo – Busca o elemento pai mais próximo com posicionamento relativo, absoluto ou fixo.
• Acompanha o conteúdo da página ao rolar – O elemento se move com o conteúdo da página conforme o usuário rola a página.
• Pode se sobrepor a outros elementos – Pode cobrir ou ser coberto por outro conteúdo da página.

O exemplo a seguir cria uma janela pop-up que aparece a 50 pixels da parte superior e a 20 pixels da borda direita do elemento pai posicionado.

.janela-popup {
  position: absolute;
  top: 50px;
  right: 20px;
  width: 200px;
  background-color: white;
  border: 1px solid gray;
  padding: 10px;
}

Posicionamento fixo

Ao usar position: fixed, o elemento é posicionado em relação à janela do navegador. O elemento permanece exatamente no mesmo lugar na tela, mesmo quando os usuários rolam a página para cima ou para baixo. Dessa forma, o posicionamento fixo é perfeito para barras de navegação, cabeçalhos ou botões que devem permanecer sempre visíveis.

• Remove o elemento do fluxo do documento – Outros elementos preenchem o espaço como se o elemento posicionado não existisse.
• Posicionado em relação à janela do navegador – Sempre utiliza a área visível (viewport) como ponto de referência.
• Permanece na mesma posição da tela ao rolar a página – Não se move quando os usuários rolam a página.
• Sempre visível para os usuários – Permanece na tela independentemente do tamanho da página ou da posição de rolagem.

O exemplo a seguir cria um cabeçalho que permanece na parte superior da janela do navegador, mesmo quando os usuários rolam a página para baixo. A propriedade z-index garante que o cabeçalho apareça acima do restante do conteúdo da página.

.cabecalho-fixo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: blue;
  color: white;
  z-index: 100;
}

Imagens e posição/dimensionamento

O CSS é frequentemente usado para definir a posição e o tamanho das imagens. Ao definir o tamanho de uma imagem, lembre-se de que elas podem ficar pixelizadas ou distorcidas se você alterar a proporção de suas dimensões originais. Para evitar isso, geralmente define-se apenas a largura ou a altura em CSS, preservando a proporção.

Quando uma imagem está dentro de um contêiner com dimensões definidas, usar width: 100% nela é uma prática comum para fazer com que ocupe todo o espaço do contêiner.

img {
  width: 100%;
  height: auto;
}

A proporção, que é a relação da largura pela altura, geralmente é mostrada como 2:1, sendo que largura é o dobro da altura.

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Instruções da Atividade

Configuração do Arquivo

1. Crie um arquivo chamado "sobrepor.html" na pasta semana03 .
2. Adicione um arquivo CSS chamado "sobrepor.css" na pasta semana03/estilos.

HTML

1. Atribua uma estrutura HTML básica e válida ao documento sobrepor.html.
2. Certifique-se de vincular o arquivo CSS no cabeçalho, head, do seu documento HTML, usando link.
3. Copie este HTML para o arquivo.

   <main>
     <h1>Layout do CSS: Posição Absoluta</h1>
     <div class="div-principal">
       <img src="https://churchofjesuschristtemples.org/assets/img/temples/salvador-brazil-temple/salvador-brazil-temple-51668-main.jpg"
        alt="Imagem de espaço reservado" width="700" height="300">
       <section class="estatisticas">
         <h2>Brasil</h2>
         <p>Idioma: <span id="lan">Português</span></p>
         <p>Tamanho: <span id="size">8,5 milhões de km<sup>2</sup></span></p>
         <p>Acessou: <span id="acesso">Não</span></p>
       </section>
     </div>
   </main>
   <footer>Conteúdo do rodapé em Posição Fixa com a parte inferior definida como 0 pixels.</footer>

CSS

1. Copie este código CSS para o arquivo sobrepor.css.

   * {
     margin: 0;
     padding: 0;
   }
         
   main {
     max-width: 800px;
     margin: 2rem auto;
     font-family: Arial, Helvetica, sans-serif;
   }
         
   h1 {
     text-align: center;
     font-size: 1.5rem;
     text-shadow: 3px 3px 5px #777;
   }
         
   .div-principal {
     margin: 10px auto;
     position: relative; /* O que acontece ao remover? */
   }
         
   .div-principal img {
     width: 100%;
     height: 300px;
     object-fit: cover;
   }
         
   .estatisticas {
     position: absolute;
     top: 25px;
     right: 25px;
     background: radial-gradient(#eee, #323A06);
     border: 1px solid #000;
     padding: 0.65rem;
     box-shadow: 0 0 30px #111;
     opacity: 0.9;
   }
         
   h2 {
     text-shadow: 0 0 15px #333;
     border-bottom: 1px solid #555;
     margin-bottom: 0.3rem;
   }
         
   footer {
     position: fixed;
     bottom: 0;
     margin: 1rem;
     border-top: 1px solid #000;
     padding: 0.5rem;
     color: navy;
     font-weight: 700;
     font-style: italic;
   }

2. Utilize o Live/Five Server para abrir a página no seu navegador e visualizá-la.
3. Usando CSS, mova a caixa de exibição <section class="estatisticas"> do canto superior direito para o canto inferior esquerdo da imagem.
   Avalie Seu Conhecimento

   Importante: remova as propriedades top e right antes de adicionar:

     ...
     bottom: 25px;
     left: 15px;
     ...

4. Remova a propriedade position: relative; do contêiner div (esta div tem uma classe div-principal atribuída a ele).
   O que acontece?
   Avalie Seu Conhecimento

   Ao remover position: relative do contêiner, a <section class="estatisticas"> deixa de usar a div como referência e passa a se posicionar em relação ao body da página. Isso ocorre porque elementos com position: absolute precisam de um ancestral com position definido. Sem isso, o navegador usa o documento inteiro como base para o posicionamento.

5. Observe também o rodapé usando uma declaração position: fixed.

Envio

1. Confirme (commit) e envie (push) seu trabalho para seu repositório wdd130 habilitado para o GitHub Pages.

   https://nomedeusuariodogithub.github.io/wdd130/semana03/sobrepor.html

2. Compartilhe e discuta seu trabalho com seus colegas no Microsoft Teams, usando o canal da Semana 03.