sobre

Com a finalidade de desenvolvermos layouts mais complexos, precisamos discutir sobre a propriedade position. Esta propriedade possui diversos valores possíveis e seus nomes não fazem sentido e são impossíveis de lembrar. Vamos ver um por um, mas talvez seja bom você também marcar esta página.

static

.static {
  position: static;
}

o valor static é o valor padrão de todos os elementos HTML. Um elemento com position: static; não se posiciona de maneira especial, seria o mesmo que dizer que o elemento não tem posição definida ou então que um elemento com o atributo position definido seria posicionado.

</div>

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

relative se comporta igualmente ao static, a menos que se adicione propriedades extras no estilo do elemento.

</div>

Definindo as propriedades top, right, bottom, e left em um elemento position:relative o ajustamos em relação à posição atual dele. Outros conteúdos não vão se ajustar para se encaixarem em qualquer espaço deixado por esse elemento.

</div>

fixed

Oi! Não se importe comigo ainda.

</div>

Um elemento fixo - fixed - é posicionado relativamente ao "viewport", isso significa que ele sempre ficará no mesmo lugar mesmo que haja rolagem na página. Assim como o relative, as propriedades top, right, bottom e left também são utilizadas.

Tenho certeza que você notou um elemento fixo no canto direito da tela, estou te dando a permissão de observá-lo agora, e aqui está o CSS aplicado a ele:

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

Um elemento fixo não deixa espaço vazio onde ele seria inserindo normalmente no documento.

Navegadores de dispositivos móveis são bastante instavéis ao lidar com o valor fixed. Saiba mais sobre o assunto aqui.

absolute

O valor absolute é o mais complicado. Este valor se comporta como o fixed, porém tendo como referência a posição do elemento relativo mais próximo de onde está contido, ao invés do viewport. Se um elemento position:absolute não possuir elementos ancestrais posicionados relativamente, ele utilizará o body como referência.

Aqui está um simples exemplo:

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

Este elemento está com position:relative. Se este elemento tivesse com position: static;, seu elemento filho escaparia e se posicionaria em relação ao elemento body do documento

Este elemento é position:absolute. E é posicionado em relação ao seu elemento pai.

</div>

Este é um assunto complicado, mas é essencial para estruturação de layouts em HTML com CSS. Na próxima página, vamos utilizar a propriedade position em um exemplo mais prático.

Anterior Próximo