🎪 Display, Position, Z-Index e Overflow
📺 Display
/* Valores principais de display */
display: block; /* Comportamento de bloco */
display: inline; /* Comportamento inline */
display: inline-block; /* Híbrido */
display: none; /* Elemento não aparece */
display: flex; /* Layout flexível */
display: grid; /* Layout em grade */
display: table; /* Comporta como tabela */
Exemplos de Display:
Display: Block
Display Inline:
Inline 1
Inline 2
Inline 3
| Display |
Comportamento |
Uso Comum |
block |
Nova linha, largura total |
Divs, parágrafos, títulos |
inline |
Mesma linha, largura do conteúdo |
Links, spans, texto |
inline-block |
Mesma linha + aceita dimensões |
Botões, menus, cards |
flex |
Layout flexível moderno |
Layouts responsivos |
none |
Elemento não aparece |
Mostrar/ocultar elementos |
📍 Position
/* Tipos de posicionamento */
position: static; /* Padrão - fluxo normal */
position: relative; /* Relativo à posição original */
position: absolute; /* Relativo ao pai posicionado */
position: fixed; /* Relativo à viewport */
position: sticky; /* Híbrido relative/fixed */
/* Propriedades de posicionamento */
top: 20px; /* Distância do topo */
right: 10px; /* Distância da direita */
bottom: 15px; /* Distância da base */
left: 5px; /* Distância da esquerda */
Static (Padrão)
Relative (movido 20px/30px)
Absolute (top: 50px, right: 20px)
Container com position: relative
O elemento absolute se posiciona relativo a este container.
🎯 Dicas importantes:
• relative: elemento mantém espaço original
• absolute: elemento sai do fluxo normal
• fixed: sempre visível, mesmo com scroll
• Elementos posicionados podem usar z-index
📚 Z-Index
/* Z-index controla ordem de empilhamento */
z-index: 1; /* Nível 1 */
z-index: 10; /* Nível 10 - fica por cima do 1 */
z-index: -1; /* Nível negativo - fica atrás */
/* IMPORTANTE: só funciona em elementos posicionados */
position: relative; /* ou absolute, fixed, sticky */
z-index: 999; /* Agora funciona! */
Z-index: 1
Z-index: 2
Z-index: 3
Elementos se sobrepõem conforme o z-index
⚠️ Atenção: Z-index só funciona em elementos posicionados (não static). Valores maiores ficam "por cima".
📦 Overflow
/* Controla conteúdo que excede o contêiner */
overflow: visible; /* Padrão - conteúdo vaza */
overflow: hidden; /* Conteúdo é cortado */
overflow: scroll; /* Sempre mostra scrollbars */
overflow: auto; /* Scrollbars quando necessário */
/* Controle por eixo */
overflow-x: hidden; /* Só eixo horizontal */
overflow-y: scroll; /* Só eixo vertical */
💡 Usos comuns:
• overflow: hidden - Clearfix, ocultar conteúdo
• overflow: auto - Áreas de conteúdo scrollável
• overflow: scroll - Sempre mostrar scrollbars
• overflow-x/y - Controle específico por eixo
Position: Fixed
(sempre visível)
Dev by Maugus em CSS puro 🎨