A position propriedade especifica o tipo de método utilizado para o posicionamento de um elemento (estática, relativo, fixo ou absoluto).
A propriedade position
A position propriedade especifica o tipo de método utilizado para o posicionamento de um elemento.
Há quatro valores de posição diferentes:
-
static -
relative -
fixed -
absolute
Os elementos são então posicionados usando a parte superior, inferior, esquerdo e direito propriedades. No entanto, essas propriedades não funcionará a menos que a position propriedade é definida em primeiro lugar. Eles também funcionam de forma diferente, dependendo do valor da posição.
position: static;
elementos HTML estão posicionados estática por padrão.
elementos posicionados estáticos não são afetados pela parte superior, inferior, esquerda e direito propriedades.
Um elemento com position: static; não está posicionado em qualquer maneira especial; -se sempre posicionados de acordo com o fluxo normal da página:
Aqui está o CSS que é usado:
position: relative;
Um elemento com position: relative; é posicionado em relação à sua posição normal.
Definir o topo, direita e inferior, e as propriedades deixadas de um elemento relativamente posicionado fará com que ele seja ajustado fora de sua posição normal. Outro conteúdo não será ajustado 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;
} Tente você mesmo " position: fixed;
Um elemento com position: fixed; está posicionado em relação ao visor, o que significa que permanece sempre no mesmo lugar, mesmo que a página é rolada. A parte superior, direito, inferior e propriedades restantes são usadas para posicionar o elemento.
Um elemento fixo não deixa uma lacuna na página onde ele normalmente teria sido 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;
} Tente você mesmo " position: absolute;
Um elemento com position: absolute; é posicionado em relação ao antepassado mais próximo posicionado (em vez de posicionado em relação à janela de exibição, como fixo).
Contudo; se um elemento posicionado absoluta não tem antepassados posicionado, ele usa o corpo do documento, e se move junto com rolagem de página.
Nota: A "positioned" elemento é aquele cuja posição é nada além de static .
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;
}
Tente você mesmo " sobreposição Elements
Quando os elementos são posicionados, que podem sobrepor-se outros elementos.
O z-index propriedade especifica a ordem de empilhamento de um elemento (que elemento deve ser colocado em frente, ou para trás, os outros).
Um elemento pode ter uma ordem de pilha positivo ou negativo:
Esta é uma posição
Uma vez que a imagem tem um índice z de -1, ele será colocado atrás do texto.
Um elemento com maior ordem da pilha é sempre na frente de um elemento com uma ordem de pilha inferior.
 | Nota: Se dois elementos posicionados sobrepõem sem um z-index especificado, o último elemento posicionado no código HTML será mostrado no topo. |
|---|
Posicionamento texto em uma imagem
Como posicionar o texto sobre uma imagem:
Exemplo
Tente você mesmo:
Top Left » Top Right» Inferior Esquerda » inferior direito» Centrado »
mais Exemplos
Definir a forma de um elemento
Este exemplo demonstra como para definir a forma de um elemento. O elemento é cortado para esta forma, e exibido.
Como mostrar estouro de um elemento usando rolagem
Este exemplo demonstra como definir a propriedade overflow para criar uma barra de rolagem quando o conteúdo de um elemento é grande demais para caber em uma área especificada.
Como configurar o navegador para tratar automaticamente estouro
Este exemplo demonstra como configurar o navegador para tratar automaticamente estouro.
Alterar o cursor
Este exemplo demonstra como alterar o cursor.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »
Todas as propriedades CSS de posicionamento
| Propriedade | Descrição |
|---|---|
| bottom | Define a borda margem inferior de uma caixa posicionada |
| clip | Clipes um elemento posicionado de forma absoluta |
| cursor | Especifica o tipo de cursor para ser exibido |
| left | Define a borda da margem esquerda para uma caixa posicionado |
| overflow | Especifica o que acontece se o conteúdo transborda a caixa de um elemento |
| overflow-x | Especifica o que fazer com os / as bordas esquerda e direita do conteúdo se ele transborda área de conteúdo do elemento |
| overflow-y | Especifica o que fazer com o início / extremidade inferior do conteúdo se ele transborda área de conteúdo do elemento |
| position | Especifica o tipo de posicionamento para um elemento |
| right | Define a borda margem direita para uma caixa posicionado |
| top | Define a borda margem superior para uma caixa posicionado |
| z-index | Define a ordem de empilhamento de um elemento |