Trabalhando com Floats

• Definição: Floats são usados para remover um elemento do seu fluxo normal na página e posicioná-lo à esquerda ou à direita do seu container. Quando isso acontece, o texto irá envolver esse conteúdo flutuante.

float: left;
float: right;

• Limpando Floats: A propriedade clear é usada para determinar se um elemento precisa ser movido para baixo do conteúdo flutuante. Quando você tem múltiplos elementos flutuantes empilhados lado a lado, pode haver problemas de sobreposição e colapso nos layouts. Então um hack clearfix foi criado para corrigir esse problema.

<link rel="stylesheet" href="styles.css">
<div class="clearfix">
  <div class="box left">Left</div>
  <div class="box right">Right</div>
</div>

.box {
  width: 100px;
  height: 60px;
  color: white;
  text-align: center;
  line-height: 60px;
}

.left {
  float: left;
  background: teal;
}

.right {
  float: right;
  background: purple;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Posicionamento Estático, Relativo e Absoluto

• Posicionamento Estático: Este é o fluxo normal do documento. Os elementos são posicionados de cima para baixo e da esquerda para a direita um após o outro.
• Posicionamento Relativo: Isso permite que você use as propriedades top, left, right e bottom para posicionar o elemento dentro do fluxo normal do documento. Você também pode usar o posicionamento relativo para fazer com que elementos se sobreponham a outros elementos na página.

<link rel="stylesheet" href="styles.css">
<div class="relative">Relative Element</div>

.relative {
    position: relative;
    top: 30px;
    left: 30px;
}

• Posicionamento Absoluto: Isso permite que você retire um elemento do fluxo normal do documento, fazendo com que ele se comporte de forma independente dos outros elementos.

<link rel="stylesheet" href="styles.css">
<div class="parent">
  Parent
  <div class="positioned">Absolute</div>
</div>

.parent {
  position: relative;
  height: 120px;
  background: #eee;
}

.positioned {
  position: absolute;
  top: 30px;
  left: 30px;
  background-color: coral;
}

Posicionamento Fixo e Fixo Adesivo

• Posicionamento Fixo: Quando um elemento é posicionado com position: fixed, ele é removido do fluxo normal do documento e colocado em relação à viewport, o que significa que permanece na mesma posição mesmo quando o usuário rola a página. Isso é frequentemente usado para elementos como cabeçalhos ou barras de navegação que precisam permanecer visíveis o tempo todo.

<link rel="stylesheet" href="styles.css">
<div class="navbar">Fixed Navbar</div>
<div style="height: 600px;"></div>

.navbar {
  position: fixed; 
  top: 0; 
  width: 100%;
  background: #0077ff;
  color: white;
  padding: 8px; 
}

• Sticky Positioning: This type of positioning will act as a hybrid between relative and fixed positioning. Inicialmente, o elemento se comporta como se estivesse posicionado relativamente, permanecendo dentro do fluxo do documento. No entanto, uma vez que o usuário rola o elemento além de um determinado ponto, ele "gruda" na viewport (geralmente no topo) e se comporta como se estivesse fixo. Isso é ótimo para criar elementos como barras de navegação fixas, que só se tornam fixas quando o usuário rola até uma determinada posição.

<link rel="stylesheet" href="styles.css">
<p>Scroll down</p>
<div class="positioned">Sticky Element</div>
<div style="height: 500px;"></div>

.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
  background: #4caf50;
  color: white;
  padding: 6px;
}

Trabalhando com a propriedade z-index

• Definição: A propriedade z-index no CSS é usada para controlar a ordem de empilhamento vertical de elementos posicionados que se sobrepõem na página.

<link rel="stylesheet" href="styles.css">
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box1 {
  background: lightcoral;
  top: 20px;
  left: 20px;
  z-index: 1;
}

.box2 {
  background: steelblue;
  top: 40px;
  left: 40px;
  z-index: 2;
}