Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula

arrow_back Aula 09 - Modelo de caixas, Posicionamento e Alinhamento

Posicionamento (Parte 2)

Agora, você dará continuidade ao entendimento dos tipos de posicionamento disponíveis no CSS: absolute e stick.

Absolute

O posicionamento absolute controla o posicionamento de um elemento em relação à posição do elemento pai, que no que lhe concerne, deve ter um posicionamento diferente de static. Caso não haja um elemento pai com posicionamento diferente de static, a página toda será utilizada como referência.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Absolute</title>
<style>

div {
  background-color: grey;
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
  max-width: 500px;
  box-sizing: border-box;
}

div.relative {
  position: relative;
  left: 10px;
  top: 5px;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
}
</style>
</head>
<body>

  <div class="relative"> Relativo
    <div class="absolute">Absoluto</div>
  </div>

</body>
</html>

Stick

Um elemento com posição sticky é posicionado com base na posição de rolagem do usuário.

Um elemento sticky alterna entre relative e fixed, dependendo da posição de rolagem. Ele é posicionado de forma relativa até que uma determinada posição de deslocamento seja encontrada na janela de exibição - então, ele "se fixa" no lugar (como posição: fixed). Veja exemplo de como configurar:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sticky</title>
<style>

  div {
    background-color: grey;
    border: 2px solid black;
    padding: 10px;
    margin: 10px;
    max-width: 500px;
    box-sizing: border-box;
  }

  div.sticky {
    position: sticky;
    top: 10px;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;
  }

</style>
</head>
<body>

 <div class="sticky">I am sticky!</div>

</body>
</html>

Para perceber o efeito, é necessário que a página HTML apresente conteúdo suficiente para gerar barra de rolagem.

Posicionando ao centro

Para posicionar um elemento no centro, pode-se utilizar a opção auto da propriedade margin. Com isso, a margem será automaticamente calculada, de forma a manter o elemento no centro.

div {
  margin: auto;
}

Versão 5.3 - Todos os Direitos reservados