{"id":38246,"date":"2025-08-22T14:51:19","date_gmt":"2025-08-22T17:51:19","guid":{"rendered":"https:\/\/www.locaweb.com.br\/ajuda\/?post_type=ht_kb&p=38246"},"modified":"2025-08-22T14:51:19","modified_gmt":"2025-08-22T17:51:19","slug":"position-css","status":"publish","type":"ht_kb","link":"https:\/\/www.locaweb.com.br\/ajuda\/wiki\/position-css\/","title":{"rendered":"Position CSS: entenda como usar a propriedade"},"content":{"rendered":"

A propriedade <\/span>position CSS<\/b> \u00e9 essencial para controlar o posicionamento de elementos em uma p\u00e1gina. Saber como ela funciona ajuda a construir layouts mais organizados e funcionais.\u00a0<\/span><\/p>\n

Hoje, entenderemos seus diferentes valores, veremos alguns exemplos pr\u00e1ticos, boas pr\u00e1ticas e como ela impacta a acessibilidade.<\/span><\/p>\n

O que \u00e9 a propriedade position no CSS?<\/span><\/h2>\n

A propriedade<\/span> position no <\/span>CSS<\/span><\/a> define como um elemento \u00e9 posicionado dentro do documento. Ela determina<\/span> se o elemento seguir\u00e1 o fluxo padr\u00e3o da p\u00e1gina ou se poder\u00e1 ser movido<\/b> para posi\u00e7\u00f5es espec\u00edficas, com base em valores como <\/span>top<\/b>,<\/span> right<\/b>,<\/span> bottom<\/b> e<\/span> left<\/b>.<\/span><\/p>\n

Essa defini\u00e7\u00e3o \u00e9 essencial para controlar o layout e permite criar desde estruturas simples at\u00e9 composi\u00e7\u00f5es mais complexas, como menus fixos, caixas flutuantes ou elementos sobrepostos. Dessa forma, \u00e9 poss\u00edvel alterar o comportamento natural dos elementos na renderiza\u00e7\u00e3o da p\u00e1gina.<\/span><\/p>\n

Por padr\u00e3o, todos os elementos s\u00e3o posicionados de forma est\u00e1tica e seguem a ordem do c\u00f3digo. No entanto, usar valores como <\/span>relative<\/b>, <\/span>absolute<\/b>, <\/span>fixed<\/b> e <\/span>sticky<\/b> facilita o controle do posicionamento.<\/span><\/p>\n

Essa habilidade de ajustar a localiza\u00e7\u00e3o de cada parte da interface torna o <\/span>position<\/b> muito \u00fatil no desenvolvimento web. Com ela, d\u00e1 para criar <\/span>experi\u00eancias visuais mais pr\u00e1ticas, f\u00e1ceis de usar e que se adaptam<\/b> bem a diferentes tamanhos de tela e dispositivos.<\/span><\/p>\n

\"\"<\/p>\n

Os diferentes valores da propriedade position<\/span><\/h2>\n

A propriedade position pode assumir diferentes valores, cada um com um comportamento espec\u00edfico. Entender cada um deles \u00e9 importante para controlar o layout da p\u00e1gina com efici\u00eancia.<\/span><\/p>\n

A seguir, conhe\u00e7a os cinco principais valores: <\/span>static<\/b>,<\/span> relative<\/b>, <\/span>absolute<\/b>,<\/span> fixed<\/b> e <\/span>sticky<\/b>, acompanhados de exemplos pr\u00e1ticos para facilitar a visualiza\u00e7\u00e3o e a aplica\u00e7\u00e3o.<\/span><\/p>\n

static (Padr\u00e3o)<\/span><\/h3>\n

O valor static \u00e9 o padr\u00e3o de todos os elementos <\/span>HTML<\/span><\/a>, quando n\u00e3o h\u00e1 necessidade de modificar a posi\u00e7\u00e3o padr\u00e3o do elemento.<\/span><\/p>\n

Quando n\u00e3o se define um position espec\u00edfico, o navegador aplica automaticamente esse valor. Nesse modo, o elemento \u00e9 <\/span>renderizado conforme a ordem natural <\/b>do documento, ou seja, dentro do fluxo normal da p\u00e1gina.<\/span><\/p>\n

Elementos com <\/span>position: static<\/span><\/i> n\u00e3o respondem \u00e0s propriedades top, right, bottom ou left. Essas instru\u00e7\u00f5es s\u00f3 funcionam com valores de position que permitem posicionamento personalizado, como <\/span>relative<\/b>, <\/span>absolute<\/b>,<\/span> fixed<\/b> e <\/span>sticky<\/b>.\u00a0<\/span><\/p>\n

Exemplo pr\u00e1tico<\/span><\/h4>\n

Considere um bot\u00e3o que deve seguir o fluxo padr\u00e3o da p\u00e1gina para aparecer abaixo de um par\u00e1grafo. Nesse caso, n\u00e3o \u00e9 necess\u00e1rio alterar o position, pois o comportamento natural j\u00e1 atende \u00e0 estrutura desejada.<\/span><\/p>\n

<p>Este \u00e9 um par\u00e1grafo de texto.<\/p><\/span><\/i>\r\n\r\n<button style=\"position: static;\">Clique aqui<\/button><\/span><\/i><\/pre>\n
Mesmo que a propriedade <\/span>position: static <\/span><\/i>seja definida manualmente, o<\/span> resultado visual ser\u00e1 o mesmo<\/b> que n\u00e3o definir nenhuma, j\u00e1 que \u00e9 o padr\u00e3o. O bot\u00e3o ser\u00e1 exibido logo ap\u00f3s o par\u00e1grafo, sem altera\u00e7\u00e3o de posicionamento.<\/span><\/p>\n
relative<\/span><\/h3>\n
O valor relative posiciona o<\/span> elemento em rela\u00e7\u00e3o \u00e0 sua posi\u00e7\u00e3o original no fluxo <\/b>do documento. Isso significa que o espa\u00e7o ocupado por ele continua reservado no layout, mas o elemento pode ser deslocado para outra posi\u00e7\u00e3o por meio das propriedades <\/span>top<\/b>, <\/span>right<\/b>, <\/span>bottom<\/b> e<\/span> left<\/b>.<\/span><\/p>\n
Esse tipo de posicionamento \u00e9 \u00fatil para movimenta\u00e7\u00f5es leves, sem alterar o comportamento dos demais \u00e0 sua volta.<\/span><\/p>\n
Tamb\u00e9m \u00e9 comum usar relative em elementos que servir\u00e3o de refer\u00eancia para posicionar outros com absolute, j\u00e1 que absolute se baseia no elemento pai mais pr\u00f3ximo com position diferente de static.<\/span><\/p>\n
Exemplo pr\u00e1tico<\/span><\/h4>\n
No exemplo abaixo, o bot\u00e3o \u00e9 deslocado 20 pixels para baixo e 30 pixels para a direita em rela\u00e7\u00e3o \u00e0 sua posi\u00e7\u00e3o original, mas o<\/span> espa\u00e7o reservado a ele continua<\/b> no mesmo lugar.<\/span><\/p>\n
<button style=\"position: relative; top: 20px; left: 30px;\"><\/span><\/i>\r\n\r\n\u00a0\u00a0Bot\u00e3o deslocado<\/span><\/i>\r\n\r\n<\/button><\/span><\/i><\/pre>\n
O bot\u00e3o se move visualmente, mas o layout geral da p\u00e1gina n\u00e3o se ajusta ao novo local dele, o que mant\u00e9m seu espa\u00e7o original reservado.<\/span><\/p>\n
absolute<\/span><\/h3>\n
O valor absolute <\/span>remove completamente o elemento do fluxo normal <\/b>do documento. Isso significa que ele n\u00e3o reserva espa\u00e7o na p\u00e1gina e os demais elementos se comportam como se ele n\u00e3o existisse.<\/span><\/p>\n
O posicionamento \u00e9 feito com base no elemento pai mais pr\u00f3ximo que tenha <\/span>position <\/span><\/i>diferente de <\/span>static<\/span><\/i>. Se nenhum antecessor estiver posicionado, o elemento ser\u00e1 posicionado em rela\u00e7\u00e3o ao <<\/span>html<\/span><\/i>> ou <<\/span>body<\/span><\/i>>.<\/span><\/p>\n
Essa op\u00e7\u00e3o \u00e9 \u00fatil para criar elementos que<\/span> precisam aparecer sobre outros ou em locais espec\u00edficos <\/b>da tela, como caixas de tooltip, menus suspensos ou destaques visuais.\u00a0<\/span><\/p>\n
Por estar fora do fluxo, \u00e9 poss\u00edvel controlar com precis\u00e3o sua posi\u00e7\u00e3o sem afetar os elementos ao redor.<\/span><\/p>\n
Exemplo pr\u00e1tico<\/span><\/h4>\n
O exemplo abaixo mostra um bot\u00e3o posicionado absolutamente dentro de uma<\/span> div com <\/span>position: relative<\/span><\/i>, que serve como refer\u00eancia de posicionamento.<\/span><\/p>\n
<div style=\"position: relative; width: 200px; height: 200px; background: #f0f0f0;\"><\/span><\/i>\r\n\r\n\u00a0\u00a0<button style=\"position: absolute; top: 10px; right: 10px;\"><\/span><\/i>\r\n\r\n\u00a0\u00a0\u00a0\u00a0Bot\u00e3o fixo no canto<\/span><\/i>\r\n\r\n\u00a0\u00a0<\/button><\/span><\/i>\r\n\r\n<\/div><\/span><\/i><\/pre>\n
Nesse caso, o bot\u00e3o ser\u00e1 exibido no canto superior direito da<\/span> div<\/span><\/i>, j\u00e1 que essa <\/span>div <\/span><\/i>est\u00e1 com <\/span>position: relative<\/span><\/i>. O bot\u00e3o ignora o fluxo normal e se posiciona com base nas coordenadas definidas.<\/span><\/p>\n
fixed<\/span><\/h3>\n
O valor fixed fixa o elemento em rela\u00e7\u00e3o \u00e0 janela de visualiza\u00e7\u00e3o (viewport), independentemente do quanto a p\u00e1gina seja rolada. Isso significa que o<\/span> elemento sempre permanece vis\u00edvel na mesma posi\u00e7\u00e3o da tela<\/b>, sem ser afetado pelo scroll.<\/span><\/p>\n
Esse tipo de posicionamento \u00e9 bastante utilizado para criar cabe\u00e7alhos fixos, barras de navega\u00e7\u00e3o, bot\u00f5es de a\u00e7\u00e3o flutuantes ou mensagens de alerta.\u00a0<\/span><\/p>\n
Como o elemento sai completamente do fluxo do documento, ele n\u00e3o interfere nos demais elementos da p\u00e1gina e pode se sobrepor a outros conte\u00fados quando necess\u00e1rio.<\/span><\/p>\n
Exemplo pr\u00e1tico<\/span><\/h4>\n
No exemplo, uma barra de navega\u00e7\u00e3o \u00e9 fixada no topo da tela. Mesmo ao rolar a p\u00e1gina, ela permanece vis\u00edvel.<\/span><\/p>\n
<div style=\"position: fixed; top: 0; left: 0; width: 100%; background: #333; color: white; padding: 10px;\"><\/span><\/i>\r\n\r\n\u00a0\u00a0Navega\u00e7\u00e3o fixa no topo<\/span><\/i>\r\n\r\n<\/div><\/span><\/i>\r\n\r\n<p style=\"margin-top: 60px;\"><\/span><\/i>\r\n\r\n\u00a0\u00a0Conte\u00fado da p\u00e1gina\u2026<\/span><\/i>\r\n\r\n<\/p><\/span><\/i><\/pre>\n
A div \u00e9 posicionada no topo da janela (top: 0) e ocupa toda a largura da tela. O margin-top no conte\u00fado serve para evitar que a barra sobreponha o in\u00edcio da p\u00e1gina.<\/span><\/p>\n
sticky<\/span><\/h3>\n
O valor sticky combina comportamentos de<\/span> relative e fixed.<\/span><\/p>\n
Inicialmente, o elemento se comporta como<\/span> relative<\/span><\/i>, ou seja, <\/span>segue o fluxo normal da p\u00e1gina<\/b>. Mas \u00e0 medida que a pessoa rola a p\u00e1gina, o elemento <\/span>se fixa em uma posi\u00e7\u00e3o espec\u00edfica dentro do seu cont\u00eainer<\/b> pai, conforme definido pelas propriedades<\/span> top<\/b>, <\/span>bottom<\/b>, <\/span>left<\/b> ou <\/span>right<\/b>.<\/span><\/p>\n
Esse tipo de posicionamento \u00e9 ideal para cabe\u00e7alhos de se\u00e7\u00e3o, menus laterais ou elementos que precisam permanecer vis\u00edveis por um tempo limitado durante a rolagem.\u00a0<\/span><\/p>\n
\u00c9 importante que o cont\u00eainer pai tenha altura suficiente para que o efeito funcione corretamente. Caso contr\u00e1rio, o sticky pode n\u00e3o se comportar como esperado.<\/span><\/p>\n
Exemplo pr\u00e1tico<\/span><\/h4>\n
O exemplo mostra um cabe\u00e7alho que se fixa no topo da tela enquanto a se\u00e7\u00e3o correspondente estiver vis\u00edvel.<\/span><\/p>\n
<section style=\"height: 1000px;\"><\/span><\/i>\r\n\r\n\u00a0\u00a0<h2 style=\"position: sticky; top: 0; background: white; padding: 10px; border-bottom: 1px solid #ccc;\"><\/span><\/i>\r\n\r\n\u00a0\u00a0\u00a0\u00a0Se\u00e7\u00e3o importante<\/span><\/i>\r\n\r\n\u00a0\u00a0<\/h2><\/span><\/i>\r\n\r\n\u00a0\u00a0<p>Conte\u00fado longo da se\u00e7\u00e3o\u2026<\/p><\/span><\/i>\r\n\r\n<\/section><\/span><\/i><\/pre>\n
O <\/span>h2<\/b> se comporta como um elemento comum at\u00e9 que atinja o topo da janela. A partir da\u00ed, ele se fixa e acompanha o scroll, mas apenas dentro da \u00e1rea da <<\/span>section<\/span><\/i>>.\u00a0<\/span><\/p>\n
Quando a se\u00e7\u00e3o termina, o t\u00edtulo tamb\u00e9m sai de vista. Esse comportamento \u00e9 \u00fatil para destacar t\u00edtulos ou menus em p\u00e1ginas longas, j\u00e1 que mant\u00e9m a navega\u00e7\u00e3o clara sem ocupar espa\u00e7o o tempo todo.<\/span><\/p>\n
Propriedades complementares para position<\/span><\/h2>\n
Para controlar a posi\u00e7\u00e3o de um elemento que usa relative, absolute, fixed ou sticky, o CSS disponibiliza as propriedades <\/span>top<\/b>, <\/span>bottom<\/b>,<\/span> left<\/b> e<\/span> right<\/b>.\u00a0<\/span><\/p>\n
Al\u00e9m disso, a propriedade <\/span>z-index <\/b>permite ajustar a sobreposi\u00e7\u00e3o dos elementos na p\u00e1gina a fim de garantir que elementos posicionados apare\u00e7am em camadas espec\u00edficas quando est\u00e3o sobrepostos.<\/span><\/p>\n
\"\"<\/p>\n
top, bottom, left e right<\/span><\/h3>\n
Essas quatro propriedades definem o deslocamento do elemento em rela\u00e7\u00e3o ao seu ponto de refer\u00eancia, que varia conforme o tipo de <\/span>position<\/b>.<\/span><\/p>\n