CSS Positioning (Posicionamento)
às vezes de posicionamento muito complicado!
Decidir para mostrar na frente dos elementos!
Os elementos podem sobrepor-se!
Posicionamento (posicionamento)
propriedades de posicionamento CSS lhe permitem localizar um elemento. Ele também pode ser um elemento no outro elemento por trás, e especificar um conteúdo de elemento é muito grande, o que deve acontecer.
Elementos podem ser usados na parte superior, inferior, esquerda e atributos de posicionamento certo. No entanto, essas propriedades não funcionará a menos que a propriedade position é definida em primeiro lugar. Eles também têm diferentes formas de trabalho, dependendo do método de posicionamento.
Existem quatro métodos de posicionamento diferentes.
posicionamento estático
elementos HTML padrão, que não está localizada, os elementos aparecem no fluxo normal.
elementos de posicionamento estático não será superior, inferior, esquerda, direita influência.
posicionamento fixo
Posição do elemento em relação à janela do navegador é uma posição fixa.
Mesmo quando a janela está rolando ele não se mover:
Nota: posicionamento fixono IE7 e IE8 descrição DOCTYPE precisa apoiar!
posicionamento fixo da posição dos elementos de documentos independentes de fluxo, e, portanto, não ocupa espaço.
elementos posicionados fixos e outros elementos se sobrepõem.
posicionamento relativo
elemento de posicionamento relativo é posicionado em relação à sua posição normal.
Exemplos
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
tente »
Pode ser movido posicionamento relativo dos elementos de conteúdo e os elementos que se sobrepõem, que não altera o espaço original ocupada.
elemento de posicionamento relativo é frequentemente utilizado como um bloco recipiente elementos posicionados absolutamente.
posicionamento absoluto
Posição posicionamento absoluto de elementos em relação ao elemento pai posicionado mais próximo, se o elemento não estiver posicionado elemento pai, a sua posição em relação ao <html>:
Absolutamente posicionado de modo que a posição dos elementos do documento independentes de fluxo, e, portanto, não ocupa espaço.
Elementos posicionados absolutamente e outros elementos se sobrepõem.
elementos sobrepostos
Orientação e fluxo independente de elementos do documento, para que eles possam abranger outros elementos na página
atributo z-index especifica a ordem de empilhamento de um elemento (que elemento deve ser colocado na frente ou atrás)
Elemento pode ter uma ordem de empilhamento positiva ou negativa de:
Elemento tendo uma ordem mais elevada da pilha está sempre em frente de uma ordem baixa de empilhamento dos elementos.
Nota: Se dois elementos posicionados sobrepõem, z não especificado - índice, o posicionamento final dos elementos em código HTML será exibido no topo.
mais exemplos
Este exemplo mostra como para definir a forma do elemento. O elemento é cortado para esta forma, e exibido.
Como usar a barra de rolagem para visualizar o conteúdo do elemento estouro interior
Este exemplo demonstra a propriedade overflow para criar uma barra de rolagem, quando o conteúdo de um elemento na área designada é muito grande, como configurado para acomodar.
Como configurar o navegador para tratar automaticamente estouro
Este exemplo demonstra como configurar o navegador para tratar automaticamente estouro.
Este exemplo demonstra como alterar o cursor.
Todas as propriedades de posicionamento CSS
coluna "CSS" indica a versão da definição da propriedade número que CSS (CSS1 ou CSS2).
| propriedade | explicação | valor | CSS |
|---|---|---|---|
| fundo | Deslocamento define a fronteira entre o elemento de posicionamento inferior fora do seu bloco contendo de fronteira sob. | automático comprimento % herdar | 2 |
| clipe | Clipes um elementos posicionados absolutamente | forma automático herdar | 2 |
| cursor | Mova o cursor para exibir o tipo especificado | url automático mira omissão apontador mudança e-redimensionamento ne-redimensionamento nw-redimensionamento n-redimensionamento se-redimensionamento sw-resize s-redimensionamento w-redimensionamento texto esperar ajudar | 2 |
| esquerda | Define os elementos de segmentação deixou limite bloco de deslocamento de margem entre a borda esquerda da sua contendo. | automático comprimento % herdar | 2 |
| transbordamento | Quando o teor do elemento de definir o que acontece quando transbordou sua região. | automático oculto rolagem visível herdar | 2 |
| overflow-y | Especifica como lidar com o conteúdo do topo borda inferior / da área de conteúdo elemento do estouro | automático oculto rolagem visível não-display sem conteúdo | 2 |
| overflow-x | Especifica como lidar com a direita / borda esquerda da área de conteúdo do que está cheio o conteúdo do elemento | automático oculto rolagem visível não-display sem conteúdo | 2 |
| posição | Especifique o tipo de elementos de posicionamento | absoluto fixo parente estático herdar | 2 |
| direito | Ele define os elementos de segmentação que compõem a sua fronteira e deslocamento entre a borda direita do bloco margem direita. | automático comprimento % herdar | 2 |
| topo | Ele define um elemento de posicionamento na fronteira e sua margem sobre o bloco contém o deslocamento entre as fronteiras. | automático comprimento % herdar | 2 |
| z-index | Definir a ordem de empilhamento dos elementos | número automático herdar | 2 |