Posicionamento de Elementos HTML com CSS - Position Absolute

por Jackson Neri da Camara | Atualização
CSS Modular

A propriedade "position" no CSS define alternativas para posicionar elementos, projetados para serem úteis em efeitos de animações. Normalmente o desenvolvedor que acaba de conhecer essa propriedade, acha que ela é a resposta para todos os problemas de posicionamento e diagramação de layout. Mas a propriedade "position" não serve para estruturar os layouts. Para isso, você deve utilizar as propriedades "float", "flexbox" e "grid layout". Ou se preferir você pode utilizar frameworks como Bootstrap.

A propriedade "position" possui 5 valores: "static", "relative", "absolute", "fixed" e "sticky". A propriedade "static" é o padrão, esta propriedade não altera o comportamento do objeto, mantendo-o no fluxo normal do documento.

Neste tutorial vamos falar sobre a propriedade "positon: absolute". Esta propriedade permite posicionar elementos de acordo com o seu ancestral, através das propriedades de coordenadas left, top, right e bottom. Elementos definidos como absolute são retirados do fluxo natural do documento, seus irmãos e pais se comportam como se o elemento não existisse mais. Se você ainda não entende o significado irmão, pai, avô e etc dentro do CSS, aconselho fortemente que você baixe o ebook CSS Modular (gratuito) onde esses conceitos são ensinados.

Gratuito

ebook css modular

CSS Modular

Aprenda a organizar e estruturar seu código CSS através de módulos.

Configurações Iniciais

Para realizar os exercícios é necessário que você baixe o código de exemplo. Digite seu e-mail no campo abaixo para receber o link de download no seu e-mail. Caso não receba o e-mail, verifique a caixa de SPAM do seu e-mail.

Download Código de Exemplo

Enviaremos o link para seu e-mail

Após baixar o código de exemplo descompacte o arquivo. Abra o documento index.html num editor de texto da sua preferência (VS Code). Abra o arquivo index.html no navegador de sua preferência (Firefox), o resultado no navegador deverá ser igual a figura 1.

Figura 1 - Configuração Inicial
Figura 1 - Configuração Inicial

Atenção: Inserimos uma letra dentro de cada div para referênciar a div por sua letra. Portanto, uma div que contém a letra "B" chamaremos de elemento "B".

Propriedade position: absolute

Para posicionar um elemento de forma absoluta utilize a propriedade "position" com o valor "absolute". Defina "position: absolute" no classe "b" CSS para obter o mesmo resultado da figura 2.

CSS index.html


.b {
    color: #006611;
    border: 2px solid #2ba740;
    background-color: #5cf169;
    position: absolute;
}
Figura 2 - Posicionando elemento com absolute
Figura 2 - Posicionando elemento com absolutel

Coordenadas

Para posicionar os elementos, você precisa inserir uma coordenada. Essas coordenadas são realizadas pelas propriedades top, left, right ou bottom. Obviamente, se você definir um left para o seu elemento, não faz sentido definir um right. A mesma coisa para o bottom e o top. As coordenadas só funcionam em elementos com os valores de position igual a absolute, relative, sticky ou fixed .

Para alterar a posição dos elementos conforme a figura 3 defina as propriedades "left: 100px" e "top: 75px" na classe "b" CSS.

CSS index.html


.b {
    color: #006611;
    border: 2px solid #2ba740;
    background-color: #5cf169;
    position: absolute;
    left: 100px;
    top: 75px;
}
Figura 3 - Posicionando elemento com absolute
Figura 3 - Alterando a posição

Fluxo natural

Ao definir o elemento "B" com position absolute o elemento "C" ocupou o antigo espaço de "B". Este comportamento acontece porque "position: absolute" retirou o elemento do fluxo natural do documento, permitindo que os elementos irmãos (A,C,D,E,F) ocupassem o espaço como se ele não existisse. O pai do elemento "B" também se comporta como se ele não existisse, desta forma ele não pode mais interferir no pai. Objetos filhos podem interferir na largura e altura do pai, quando as propriedades width e height não estão definidas no elemento pai. O comportamento dos irmãos são mostrado na figura 4.

Figura 4 - Elemento posicionado retirado do fluxo natural
Figura 4 - Elemento posicionado retirado do fluxo natural

Telegram

Telegram

Canal Telegram: Programação Raiz

Participe do nosso canal no Telegram para receber conteúdos gratuitos toda semana.

Posicionamento relativo ao ancestral

Na figura 4 o elemento "B" sobrepôs o elemento "A". Este comportamento acontece porque elementos com "position: absolute" são posicionados por padrão com as coordenadas "top: 0" e "left: 0". O posicionamento do elemento é relativo ao primeiro ancestral, desde que a propriedade position do seu ancestral esteja definida como absolute, relative, sticky ou fixed. Quando falamos em ancestrais, estamos fazendo referência ao pai, avô, bisavô, tataravô e assim por diante. Neste caso o pai dos elementos A, B, C, D, E, F é o elemento "section".

Se o elemento pai estiver definido com o padrão position: static e o elemento filho for definido com a propriedade position: absolute, o filho passará a ser posicionado em relação seu próximo ancestral, desde que a propriedade position esteja com o valor diferente de static. Caso todos ancestrais estejam definidos como static o elemento será posicionado relativamente ao body. Para o filho ser posicionado em relação ao pai, o elemento pai deve estar posicionado com uma das propriedades: absolute, relative, sticky ou fixed.

O elemento pai (section) possui a propriedade padrão position: static, portanto o elemento "B" esta sendo posicionado em relação ao body. Apague a propriedade top: 75px e left: 100px na classe "b" CSS e defina a propriedade "right: 0" para obter o mesmo resultado da figura 5.

CSS index.html


.b {
    color: #006611;
    border: 2px solid #2ba740;
    background-color: #5cf169;
    position: absolute;
    right: 0;
}
Figura 5 - Ancestral elemento body
Figura 5 - Ancestral elemento body

Para posicionar o elemento "B" em relação ao pai "section" devemos definir a propriedade position do pai com um dos valores: absolute, relative, sticky ou static. Defina o elemento "section" com "position: fixed" para obter o mesmo resultado da figura 6.

CSS index.html


section {
    width: 600px;
    background-color: #fff4e6;
    border: 2px solid #f76707;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    position: fixed;
}
Figura 6 - Ancestral elemento body
Figura 6 - Ancestral elemento body

Outros tipos de posicionamento CSS

Posicionamento Static

O elemento se comporta normalmente, mantendo sua posição atual no fluxo da página. As propriedades top, right, bottom, left e z-index não se aplicam para elementos com position static.

Posicionamento Relative

Mantém o elemento no fluxo do documento. Porém possibilita alterar a posição do elemento em relação a própria posição original, através das propriedades top, right, bottom, left e z-index.

Posicionamento Fixed

x Retira o elemento do fluxo do documento. Permite posicionar o elemento em uma posição específica da janela de exibição do navegador e não move quando rolada. Permite alterar a posição do elemento através das propriedades top, right, bottom, left e z-index.

Posicionamento Sticky

Posiciona o elemento com base na posição de rolagem do usuário. Um elemento posicionado com sticky alterna entre relative e fixed, dependendo da posição de rolagem. O elemento é posicionado como "relative" até que uma determinada posição de deslocamento seja alcançada na janela de visualização do navegador, após ancançá-la "gruda" no lugar sendo posicionado como "fixed".

Considerações Finais

A propriedade position deve ser usada com cuidado, caso contrário o layout ficará bagunçado por causa dos diferentes tamanhos de tela existentes. Para evitar problemas ao criar layouts responsivos, devemos utilizar tipos de medidas amigáveis ao design responsivo. Medidas como %,vh,vw,vmin,vmax podem ser uma boa escolha

Você não deve utilizar a propriedade "position" para diagramar seu layout, para isto opte por grid layout, flexbox ou algum framework como Bootstrap. A propriedade "position: absolute" é muita utilizada para fazer animações com deslocamento. Também é utilizada para posicionar elementos no banner principal, geralmente temos uma imagem no banner e queremos que nosso texto fique posicionado em algum lugar específico na imagem principal.

Espero que este tutorial tenha contribuído para o seu aprendizado. Se você ainda não baixou o código de exemplo insira seu e-mail no campo abaixo e clique em baixar para receber um link de download. É essencial para o seu aprendizado fazer alguns testes no código para que você possa compreender a propriedade "position: absolute" do CSS.

Download Código de Exemplo

Enviaremos o link para seu e-mail

Também estou disponibilizando o ebook gratuito CSS Modular que ensina como estruturar o código CSS, basta colocar seu nome, e-mail e clicar em "Quero receber o ebook agora" e você receberá um link para download. Se ficou com alguma dúvida me procure nas redes sociais pra conversarmos. Abraço e bons estudos!!!

Gratuito

ebook Lógica de Programação e Algoritmos com C#

Lógica de Programação e Algoritmos com C#

Aprenda a dominar as principais habilidades que todo programador deve saber.

Jackson Camara

Programador Fullstack com 7 anos de experiência no desenvolvimento de sistemas web e aplicativos. Bacharel em Ciência da Computação especialista em Angular, .net Core C#, Web API, PostgreSQL e AWS. Entusiasta em microsserviços, DDD e meta-heurística.

Esperando texto