Layout CSS - A propriedade position
A positionpropriedade especifica o tipo de método de posicionamento usado para um elemento (estático, relativo, fixo, absoluto ou fixo).
A propriedade da posição
A positionpropriedade especifica o tipo de método de posicionamento usado para um elemento.
Existem cinco valores de posição diferentes:
staticrelativefixedabsolutesticky
Os elementos são então posicionados usando as propriedades superior, inferior, esquerda e direita. No entanto, essas propriedades não funcionarão a menos que a position
propriedade seja definida primeiro. Eles também funcionam de forma diferente dependendo do valor da posição.
posição: estática;
Os elementos HTML são posicionados estáticos por padrão.
Elementos estáticos posicionados não são afetados pelas propriedades superior, inferior, esquerda e direita.
Um elemento com position: static;não está posicionado de forma especial; é sempre posicionado de acordo com o fluxo normal da página:
Aqui está o CSS que é usado:
Exemplo
div.static {
position: static;
border: 3px solid #73AD21;
}
posição: relativa;
Um elemento com position: relative;é posicionado em relação à sua posição normal.
Definir as propriedades superior, direita, inferior e esquerda de um elemento relativamente posicionado fará com que ele seja ajustado para fora de sua posição normal. Outros conteúdos não serão ajustados para caber em qualquer lacuna deixada pelo elemento.
Aqui está o CSS que é usado:
Exemplo
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
posição: fixa;
Um elemento com position: fixed;é posicionado em relação à janela de visualização, o que significa que ele sempre permanece no mesmo lugar, mesmo que a página seja rolada. As propriedades top, right, bottom e left são usadas para posicionar o elemento.
Um elemento fixo não deixa uma lacuna na página onde normalmente estaria localizado.
Observe o elemento fixo no canto inferior direito da página. Aqui está o CSS que é usado:
Exemplo
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;posição: absoluta;
Um elemento com position: absolute;é posicionado em relação ao ancestral posicionado mais próximo (em vez de posicionado em relação à janela de visualização, como fixo).
Contudo; se um elemento posicionado absoluto não tiver ancestrais posicionados, ele usará o corpo do documento e se moverá junto com a rolagem da página.
Nota: Elementos posicionados absolutos são removidos do fluxo normal e podem sobrepor elementos.
Aqui está um exemplo simples:
Aqui está o CSS que é usado:
Exemplo
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
posição: pegajosa;
Um elemento com position: sticky;é posicionado com base na posição de rolagem do usuário.
Um elemento adesivo alterna entre relativee fixed, dependendo da posição de rolagem. Ele é posicionado em relação até que uma determinada posição de deslocamento seja encontrada na viewport - então ele "gruda" no lugar (como position:fixed).
Nota: o Internet Explorer não suporta posicionamento fixo. O Safari requer um prefixo -webkit- (veja o exemplo abaixo). Você também deve especificar pelo menos um de , topou para que o posicionamento fixo funcione.rightbottomleft
Neste exemplo, o elemento adesivo fica no topo da página ( top: 0), quando você alcança sua posição de rolagem.
Exemplo
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Posicionando texto em uma imagem
Como posicionar o texto sobre uma imagem:
Exemplo
Tente você mesmo:
Mais exemplos
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |