Posicionamento CSS tem sido uma parte importante da criação de layouts de sites. Mesmo com o surgimento de técnicas de layout CSS, como Flexbox e CSS Grid, o posicionamento ainda tem um lugar importante na bolsa de truques de qualquer web designer.
Ao usar o posicionamento CSS, a primeira coisa que você precisa fazer é estabelecer a propriedade CSS da posição para informar ao navegador se você usará posicionamento absoluto ou relativo para um determinado elemento. Você também precisa entender a diferença entre essas duas propriedades de posicionamento.
Embora absoluto e relativo sejam as duas propriedades de posição CSS usadas com mais freqüência no design da web, há quatro estados na propriedade position:
- estático
- absoluto
- relativo
- fixo
Posicionamento Estático
Estático é a posição padrão para qualquer elemento em uma página da web. Se você não definir a posição de um elemento, ele será estático, o que significa que ele é exibido na tela com base em onde ele está no documento HTML e como ele é exibido dentro do fluxo normal desse documento.
Se você aplicar regras de posicionamento, como topo ou esquerda para um elemento que tem uma posição estática, essas regras são ignoradas e o elemento permanece onde aparece no fluxo normal do documento. Você raramente, ou nunca, precisa definir um elemento para uma posição estática no CSS, porque ele é o valor padrão.
Posicionamento CSS absoluto
O posicionamento absoluto é provavelmente a posição CSS mais fácil de entender. Você começa com esta propriedade de posição CSS:
posição: absoluta;
Esse valor informa ao navegador que o que quer que seja posicionado deve ser removido do fluxo normal do documento e, em vez disso, colocado em um local exato na página. Isso é calculado com base no ancestral não-estaticamente posicionado mais próximo desse elemento. Como um elemento absolutamente posicionado é retirado do fluxo normal do documento, isso afeta como os elementos antes ou depois dele no HTML são posicionados na página da Web. Por exemplo, se você tem uma divisão que é posicionada usando um valor relativo e dentro dessa divisão, você tem um parágrafo que deseja posicionar 50 pixels do topo da divisão, você adiciona um valor de posição de absoluto para esse parágrafo, juntamente com um valor de compensação de 50 px no topo propriedade, assim: posição: absoluta;top: 50px;
Este elemento absolutamente posicionado sempre exibe 50 pixels a partir do topo daquela divisão relativamente posicionada, não importa o que mais exista no fluxo normal. Seu elemento absolutamente posicionado usa o relativamente posicionado como seu contexto, e o valor de posicionamento que você usa é relativo a isso. As quatro propriedades de posicionamento que você tem disponível para uso são: Você pode usar topo ou inferior - como um elemento não pode ser posicionado de acordo com esses dois valores - e certo ou esquerda. Se um elemento estiver configurado para uma posição absoluta, mas não tiver ancestrais não estaticamente posicionados, ele será posicionado em relação ao elemento body, que é o elemento de nível mais alto da página. O posicionamento relativo usa as mesmas quatro propriedades de posicionamento que o posicionamento absoluto, mas em vez de basear a posição do elemento em seu ancestral não-estaticamente posicionado mais próximo, ele começa a partir de onde o elemento estaria se ainda estivesse no fluxo normal. Por exemplo, se você tiver três parágrafos em sua página da Web e o terceiro tiver posição: relativa estilo colocado nele, sua posição é compensada com base em sua localização atual. Parágrafo 1. Parágrafo 2 Parágrafo 3 No exemplo acima, o terceiro parágrafo está posicionado a 2em do lado esquerdo do elemento recipiente, mas ainda abaixo dos dois primeiros parágrafos. Ele permanece no fluxo normal do documento e é um pouco desviado. Se você mudar para posição: absoluto, qualquer coisa após ela é exibida na parte superior porque não está mais no fluxo normal do documento. Elementos em uma página da Web são geralmente usados para definir um valor de posição: relativa sem valor de compensação estabelecido, o que significa que o elemento permanece exatamente onde ele apareceria no fluxo normal. Isso é feito apenas para estabelecer esse elemento como um contexto contra o qual outros elementos podem ser posicionados de maneira absoluta. Por exemplo, se você tem uma divisão em torno de todo o site com um valor de classe de recipiente, que é um cenário comum em web design, essa divisão pode ser definida para uma posição de relativo de modo que qualquer coisa dentro dela possa usá-lo como um contexto de posicionamento. O posicionamento fixo é muito parecido com o posicionamento absoluto. A posição do elemento é calculada da mesma maneira que o modelo absoluto, mas os elementos fixos são então fixados nesse local - quase como uma marca d'água. Tudo o mais na página, então, passa por esse elemento. Para usar esse valor da propriedade, você define: posição: fixa;
Lembre-se de que, quando você corrigir um elemento no site, ele será impresso nesse local quando sua página da Web for impressa. Por exemplo, se o elemento estiver fixo na parte superior da página, ele aparecerá no topo de todas as páginas impressas, pois está fixado na parte superior da página. Você pode usar tipos de mídia para alterar como as páginas impressas exibem elementos fixos: @media screen { h1 # first {position: fixo; } } @media print { h1 # first {position: estático; } }
Posicionamento Relativo
E quanto ao posicionamento fixo?
