O 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 no saco de truques de qualquer designer de web. 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á o 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 mais frequentemente usadas em web design, na verdade existem quatro estados para a 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 é estático, o que significa que ele é exibido na tela com base em onde está no documento HTML e como é exibido dentro do fluxo normal desse documento. Se você aplicar regras de posicionamento, como principal ou deixou para um elemento que possui 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 é 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: position: absolute;
Este valor informa ao navegador que tudo o que for 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 mais próximo não estaticamente posicionado desse elemento. Como um elemento posicionado de forma absoluta é retirado do fluxo normal do documento, ele 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 a esse parágrafo junto com um valor de deslocamento de 50px no principal propriedade, assim: posição: absoluta;
topo: 50px;
Este elemento posicionado de forma absoluta sempre exibe 50 pixels do topo dessa divisão relativamente posicionada, não importa o que mais seja exibido lá no fluxo normal. Seu elemento posicionado absolutamente usa aquele posicionado relativamente como seu contexto, e o valor de posicionamento que você usa é relativo a isso. As quatro propriedades de posicionamento disponíveis para uso são:
- principal
- direito
- inferior
- deixou
Você pode usar qualquer principal ou inferior – uma vez que um elemento não pode ser posicionado de acordo com esses dois valores – e nenhum direito ou deixou. Se um elemento for definido com uma posição absoluta, mas não tiver ancestrais posicionados não estaticamente, ele será posicionado em relação ao elemento do corpo, que é o elemento de nível mais alto da página.
Posicionamento Relativo
O posicionamento relativo usa as mesmas quatro propriedades de posicionamento do posicionamento absoluto, mas em vez de basear a posição do elemento em seu ancestral mais próximo não estaticamente posicionado, ele começa de onde o elemento estaria se ainda estivesse no fluxo normal. Por exemplo, se você tem três parágrafos em sua página da web, e o terceiro tem um posição: relativa estilo colocado nele, sua posição é deslocada com base em sua localização atual.
Parágrafo 1.
Parágrafo 2.
Parágrafo 3. No exemplo acima, o terceiro parágrafo é posicionado 2em do lado esquerdo do elemento container, mas ainda abaixo dos dois primeiros parágrafos. Ele permanece no fluxo normal do documento e é ligeiramente deslocado. Se você mudar para posição: absoluta, tudo o que o segue é exibido em cima dele porque não está mais no fluxo normal do documento. Os elementos de uma página da web costumam ser usados para definir um valor de posição: relativa sem valor de deslocamento estabelecido, o que significa que o elemento permanece exatamente onde apareceria no fluxo normal. Isso é feito apenas para estabelecer esse elemento como um contexto contra o qual outros elementos podem ser posicionados de forma absoluta. Por exemplo, se você tiver uma divisão em torno de todo o seu 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 para que qualquer coisa dentro dele possa usá-lo como um contexto de posicionamento.
E quanto ao posicionamento fixo?
O posicionamento fixo é muito parecido com o posicionamento absoluto. A posição do elemento é calculada da mesma forma que o modelo absoluto, mas os elementos fixos são fixados naquele local – quase como uma marca d’água. Todo o resto da página passa por esse elemento. Para usar este valor de propriedade, você define: position: fixed;
Lembre-se de que quando você fixa um elemento em seu site, ele é impresso nesse local quando sua página da web é impressa. Por exemplo, se o seu elemento for fixado no topo da página, ele aparecerá no topo de todas as páginas impressas porque está fixado no topo da página. Você pode usar tipos de mídia para alterar como as páginas impressas exibem elementos fixos: @media screen {
h1 # primeiro {posição: fixa; }
}
@media print {
h1 # primeiro {posição: estático; }
}
Formato mla apa chicago Sua Citação
Kyrnin, Jennifer. “Absoluto x relativo – explicando o posicionamento de CSS.” ThoughtCo, maio. 14 de 2021, thinkingco.com/absolute-vs-relative-3466208.
Kyrnin, Jennifer. (2021, 14 de maio). Absoluto vs. Relativo – Explicando o Posicionamento CSS. Obtido em https://www.thoughtco.com/absolute-vs-relative-3466208
Kyrnin, Jennifer. “Absoluto x relativo – explicando o posicionamento de CSS.” ThoughtCo. https://www.thoughtco.com/absolute-vs-relative-3466208 (acessado em 15 de maio de 2021).
