{"id":762,"date":"2024-04-26T14:30:21","date_gmt":"2024-04-26T17:30:21","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=762"},"modified":"2025-11-08T09:52:59","modified_gmt":"2025-11-08T12:52:59","slug":"posicionamento-no-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/posicionamento-no-css\/","title":{"rendered":"Posicionamento no CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Posicionamento no CSS<\/strong>: A propriedade position<\/code><\/strong> \u00e9 a principal ferramenta no CSS para tirar elementos do Fluxo de Documento<\/strong> (o layout padr\u00e3o de blocos empilhados e inline<\/em> lado a lado) e posicion\u00e1-los com precis\u00e3o na tela, sobrepondo-os ou fixando-os.<\/p>\n\n\n\n

Dominar os diferentes valores de position<\/code> e sua intera\u00e7\u00e3o com as coordenadas (top<\/code>, right<\/code>, bottom<\/code>, left<\/code>) e o z-index<\/code> \u00e9 essencial para construir interfaces complexas como tooltips<\/em>, menus fixos e overlays<\/em>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Valores Fundamentais de position<\/code><\/h2>\n\n\n\n
Valor<\/strong><\/td>Fluxo de Documento<\/strong><\/td>Refer\u00eancia de Posicionamento<\/strong><\/td>Uso Comum<\/strong><\/td><\/tr><\/thead>
static<\/code><\/strong><\/td>Permanece no Fluxo (Padr\u00e3o)<\/td>Nenhuma (Ignora top<\/code>, left<\/code>, etc.)<\/td>O comportamento padr\u00e3o de todo elemento.<\/td><\/tr>
relative<\/code><\/strong><\/td>Permanece no Fluxo<\/td>Posi\u00e7\u00e3o Original do Pr\u00f3prio Elemento.<\/td>Cria um ponto de refer\u00eancia para elementos filhos absolute<\/code>.<\/td><\/tr>
absolute<\/code><\/strong><\/td>Removido do Fluxo<\/td>Ancestral Posicionado<\/strong> mais Pr\u00f3ximo.<\/td>Sobrepor elementos ou criar componentes flutuantes.<\/td><\/tr>
fixed<\/code><\/strong><\/td>Removido do Fluxo<\/td>Viewport<\/strong> (Janela do Navegador).<\/td>Cabe\u00e7alhos fixos, bot\u00f5es flutuantes (ex: scroll-to-top<\/em>).<\/td><\/tr>
sticky<\/code><\/strong><\/td>Inicialmente no Fluxo<\/td>Comportamento h\u00edbrido.<\/td>Menus ou t\u00edtulos que “grudam” ao topo durante a rolagem.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

2. A Intera\u00e7\u00e3o com Coordenadas (top<\/code>, left<\/code>, etc.)<\/h2>\n\n\n\n

Os valores relative<\/code>, absolute<\/code>, fixed<\/code> e sticky<\/code> utilizam as quatro propriedades de coordenada para determinar o deslocamento do elemento: top<\/code><\/strong>, right<\/code><\/strong>, bottom<\/code><\/strong>, e left<\/code><\/strong>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

A. position: relative<\/code><\/h3>\n\n\n\n

O elemento \u00e9 deslocado em rela\u00e7\u00e3o \u00e0 sua posi\u00e7\u00e3o original, mas seu espa\u00e7o original continua ocupado<\/strong> no fluxo, o que pode criar buracos no layout.<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

.mover {\n  position: relative;\n  \/* Desloca 10px para baixo e 20px para a esquerda em rela\u00e7\u00e3o a onde ele come\u00e7aria *\/\n  top: 10px;\n  left: -20px; \n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
B. position: absolute<\/code><\/h3>\n\n\n\n
O elemento \u00e9 completamente retirado do fluxo (os elementos vizinhos se fecham em seu lugar). Ele se posiciona em rela\u00e7\u00e3o ao seu ancestral posicionado mais pr\u00f3ximo<\/strong>.<\/p>\n\n\n\n
<\/div>\n\n\n\n
\n
Regra Crucial:<\/strong> Se um elemento absolute<\/code> n\u00e3o tem um ancestral com position: relative<\/code>, absolute<\/code>, fixed<\/code> ou sticky<\/code>, ele procurar\u00e1 at\u00e9 o elemento <body><\/code> ou, em \u00faltima inst\u00e2ncia, a Viewport<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
<\/div>\n\n\n\n
CSS<\/p>\n\n\n\n
\/* Container que servir\u00e1 de \u00e2ncora para o elemento filho *\/\n.container {\n  position: relative; \/* Torna-se o ponto de refer\u00eancia (0,0) para o filho *\/\n  width: 300px;\n}\n\n\/* O elemento ser\u00e1 posicionado 0px do topo e 0px da direita DE DENTRO do .container *\/\n.notificacao-absoluta {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
C. position: fixed<\/code><\/h3>\n\n\n\n
Retira o elemento do fluxo e o ancora \u00e0 Viewport<\/strong> (a janela vis\u00edvel do navegador). Ele permanece vis\u00edvel e fixo mesmo durante a rolagem.<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
.botao-flutuante {\n  position: fixed;\n  bottom: 20px; \/* 20px acima da borda inferior da tela *\/\n  right: 20px;  \/* 20px da borda direita da tela *\/\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
D. position: sticky<\/code><\/h3>\n\n\n\n
Este valor \u00e9 um h\u00edbrido. O elemento se comporta como static<\/code> at\u00e9 que sua borda atinja o ponto definido pela coordenada. A partir da\u00ed, ele se comporta como fixed<\/code> em rela\u00e7\u00e3o \u00e0 viewport.<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
\/* Este cabe\u00e7alho rolar\u00e1 normalmente, mas ir\u00e1 \"grudar\" no topo quando estiver a 0px dele *\/\n.titulo-secao {\n  position: sticky;\n  top: 0;\n  background: white; \/* Importante para que o conte\u00fado por baixo n\u00e3o apare\u00e7a *\/\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
3. Ordem de Empilhamento (z-index<\/code>)<\/h2>\n\n\n\n
Quando elementos posicionados (relative<\/code>, absolute<\/code>, fixed<\/code>, sticky<\/code>) se sobrep\u00f5em, a propriedade z-index<\/code><\/strong> define qual deles fica na frente.<\/p>\n\n\n\n