Aprenda Layout com CSS
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 {
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.
.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.
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.
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.
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.
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.
