CSS3 O Guia Completo - Posicionando elementos na página com position

Um dos primeiros estilos que aprendemos quando estamos estudando CSS é o estilo position. Neste artigo iremos falar sobre ele. Vamos conhecer seus possíveis valores, entender a diferença entre eles e tirar as dúvidas que talvez tenhamos sobre posicionar elementos em nossas páginas.

Para entender os conceitos, iremos usar um exemplo prático. Iremos criar um arquivo chamado index.html. Dentro dele haverá uma <div> principal e dentro dela uma outra <div>, que irá conter uma imagem da Hcode e alguns parágrafos abaixo dela.

A estrutura HTML será a seguinte:

Teremos também um arquivo chamado style.css que irá possuir essa estrutura:

#image {
	background: url('./hcode.svg') no-repeat;
	width: 450px;
	height: 150px;
}

Esse estilo será responsável por fazer o carregamento da imagem em nossa página. Ao acessar o arquivo HTML no navegador, veremos o seguinte:

Vamos agora começar a definir os estilos position para a nossa imagem, e veremos como sua posição é alterada conforme os diferentes valores desse estilo.

Algo importante que devemos lembrar ao trabalhar com o estilo position é que, ao definir esse estilo, precisamos usar os estilos top, bottom, right e left para definir onde o elemento ficará na página. Podemos dizer que esses estilos definem as “coordenadas” de posição dos elementos. Tendo em mente esse ponto importante, vamos analisar agora cada possível valor para o estilo position.

static

O primeiro valor que iremos analisar é o estilo position: static. Esse é o valor padrão para a posição de qualquer elemento. Quando o aplicamos, definimos que o elemento irá ser posicionado de acordo com o fluxo normal da aplicação, ou seja, sua posição não será afetada.

Nosso arquivo CSS ficará assim:

#image {
	background: url("./hcode.svg") no-repeat;
	width: 450px;
	height: 150px;
	position: static;
	left: 50px;
	top: 50px;
}

Na teoria, nossa imagem deverá ser deslocada 50 pixels para a direita e 50 pixels para baixo. Voltando no navegador, veremos o seguinte resultado:

Talvez pensemos: “a posição da imagem não mudou, ela continua no mesmo lugar”. É exatamente esse o efeito do static. Os estilos top, bottom, right e left simplesmente não funcionam. Essa exceção ocorre apenas com o valor static. Percebemos que ele de fato deixa o elemento “estático”. 

relative

O valor relative define que o elemento poderá ter sua posição alterada. A posição dele será relativa a si mesmo, à sua posição inicial. Vamos adicionar esse estilo em nosso código com a seguinte linha:

position: relative;

Veremos o seguinte resultado no navegador:

Note que agora o deslocamento do elemento de fato ocorreu, seguindo as “coordenadas” que informamos no arquivo CSS com o top e o left.

absolute

Quando falamos de posicionamento com CSS, uma das primeiras dúvidas que podemos nos fazer é sobre a diferença entre o position relative e o position absolute. Nós iremos entender a diferença entre eles agora.

Um elemento que possui o position como absolute terá uma posição relativa a um elemento ancestral. Na realidade, ele irá definir sua posição se baseando no elemento pai que possuir um position como relative. Se não houver nenhum elemento antes dele que possua esse tipo de position, a posição será relativa ao próprio navegador. Vamos ver na prática como ele funciona. Iremos substituir o valor do position em nosso seletor #image:

position: absolute;

Mas, antes de testar, vamos definir um position relative para a tag com id “#principal”. Além disso, vamos mover essa <div> um pouco para a direita:

#principal {
	position: relative;
	left: 150px;
}

Esse será o resultado no navegador:

Analisando o navegador podemos perceber duas coisas:

1 - A nossa imagem ficou por cima dos elementos de texto. Esse é o efeito que o position absolute realiza, ele deixa a o elemento como que “solto” na página, e nós podemos posicioná-lo onde desejarmos.

2 - Há um espaço em branco à esquerda da imagem e dos parágrafos, o que comprova que o deslocamento de 150 pixels realmente ocorreu. Assim, a nossa imagem respeitou a posição de seu elemento pai, a <div> com id “#principal” para definir sua própria posição. Isso ocorreu pois o “#principal” está com o position como relative. Se retirarmos o estilo do position deste elemento, a nossa imagem e os parágrafos irão se basear no navegador para se posicionar, como podemos ver abaixo:

Isso acontece mesmo que o estilo left: 150px continue aplicado à tag “#principal”.

Assim, se alguém nos perguntar qual é a diferença entre o position relative e o position absolute, podemos dizer: “A diferença entre eles é basicamente qual elemento será usado como referência para realizar o posicionamento. O relative leva em consideração sua própria posição para se deslocar. Já o position absolute leva em consideração a posição do elemento pai que possua um position relative ou então ele será relativo ao próprio navegador”.

O position absolute é muito interessante, mas use-o com cuidado, principalmente se você estiver trabalhando com responsivo. O fato de posicionarmos o elemento no lugar que desejarmos pode dar muita dor cabeça para quando formos reposicioná-lo em dispositivos menores.

fixed

O position fixed, como o próprio nome diz, define que o elemento ficará fixo na página. Ou seja, ele estará sempre visível. Mesmo que rolemos o scroll (barra de rolagem), ele continuará sendo exibido.

Para ver esse estilo na prática, teremos que forçar nossa página a gerar um scroll. Por isso, iremos deixar o CSS do seletor “#principal” assim:

#principal {
	height: 1000px;
}

E vamos mudar a posição de nossa imagem para fixed:

position: fixed;

Quando voltamos para o navegador, vemos o seguinte resultado:

Parece que a posição está como absolute, pois não mudou nada em relação ao último exemplo. Mas, ao rolar o scroll, veremos o seguinte:

Note que a imagem continua em sua posição, mesmo que tenha que “passar por cima” de outros elementos e ela continua fixa na página.

Esse estilo pode ser usado quando queremos criar um menu de navegação que continua sendo exibido não importa onde o usuário esteja na página, mesmo rolando o scroll. Talvez você já tenha até visto alguns desses modelos em outros sites na Web.

sticky

O position sticky é definido como a união dos conceitos do position relative e o position fixed. Quando é aplicado a um elemento, sua posição é baseada no scroll do usuário e o elemento será exibido enquanto seu elemento pai estiver no display da página. Vamos então para o exemplo! Iremos substituir o valor do position no arquivo CSS:

position: sticky;

Ao atualizar o navegador, veremos o seguinte:

O elemento parece de início estar com o position relative. Afinal de contas, ele respeitou as “coordenadas” informadas para sua posição, mas não está por cima de nenhum outro elemento. Mas, se rolarmos o scroll, veremos o seguinte:

Note que agora a imagem está por cima dos parágrafos, assim como o position fixed.

Entretanto, o position sticky não é completamente igual ao position fixed. Como comentamos acima, o elemento onde aplicamos esse estilo só será exibido enquanto o seu elemento pai também estiver sendo visível. Para ver essa diferença na prática, vamos criar mais uma <div> em nosso HTML, que será irmã da <div> principal. Ela irá conter mais alguns parágrafos de texto e sua estrutura será a seguinte:

Além disso, iremos alterar o CSS do “#principal” para esse:

#principal, #second-div {
	height: 500px;
}

Agora as duas divs terão 500 pixels de altura. Quando voltamos em nosso navegador, percebemos que o estilo continua funcionando. Mas, quando estamos chegando quase no fim da página, vemos o seguinte:

A nossa imagem não ficou por cima dos parágrafos da outra <div>, pois o estilo funciona apenas enquanto seu elemento pai está sendo exibido. Assim, conseguimos perceber que o position sticky possui um limite de atuação.

Nesse artigo aprendemos todos os valores possíveis do estilo position e vimos os recursos que cada valor desse estilo nos oferece. Assim, estamos agora em condições de decidir quando usar cada um.

Você pode encontrar o código desenvolvido nesse artigo em nosso GitHub. Assim poderá realizar seus próprios testes :)

A gente se vê no próximo artigo!