Usuário Yahoo! interface Blog (YUIBlog)

A propriedade position CSS

Essa propriedade se aplica a todos os elementos. Tem cinco valores possíveis:

• static
• relative
• absolute
• fixed
• inherit

position: static

Da secção 9 modelo de formatação Visual :

A caixa é uma caixa normal, estabelecidas de acordo com o fluxo normal . O top , right , bottom , e left as propriedades não se aplicam.

Coisas a observar no esta demonstração

• A segunda caixa mostra exatamente onde seria sem a declaração de posição.
• O valor dado a top não se aplica porque, em um contexto de "estática", o valor calculado de offsets caixa é sempre auto .

Coisas para lembrar

• Se a position propriedade de um elemento tem o valor de static , este elemento não é dito ser posicionado.
• Porque static é o valor inicial (o valor padrão), não há necessidade de incluir tal estilo em um bloco de declaração a menos que seja para substituir um valor diferente.

position: relative

Da secção 9 modelo de formatação Visual :

A posição do caixa é calculado de acordo com o fluxo normal (isto é chamado de posição no fluxo normal ). Em seguida, a caixa é deslocada em relação à sua posição normal. Quando uma caixa B é relativamente posicionados, a posição da caixa que se segue é calculada como se B não foram compensados.

Coisas a observar no esta demonstração

• 'Dois' caixa tem movido para baixo por 300 pixels, mas caixa de 'três', bem como os parágrafos seguintes permaneceu no lugar. Parece como se a caixa foi levantada a partir da página, deixando para trás a sua pegada. Isto é porque uma caixa de compensação relativamente posicionados não perturbar o fluxo.
• A caixa relativamente posicionados sobrepõe os seguintes elementos. Ele mostra na frente de outras caixas.

Coisas para lembrar

• Valores computados são sempre para a esquerda = direita e de cima = baixo. Se a direction do bloco é ltr , o valor de 'esquerda' vitórias e "direito" torna-se - 'esquerda'. Se direction do bloco é rtl , 'certo' vence e 'esquerda' é ignorado. Autores poderiam tirar proveito de como as coisas funcionam através da criação de valor igual a propriedades opostas.
• Ao contrário com o modelo de "absoluta", top , right , bottom , e left propriedades não podem esticar nem encolher a caixa (que não pode mudar seu tamanho).

position: absolute

Da secção 9 modelo de formatação Visual :

Posição da caixa (e, possivelmente, tamanho) é especificado com o top , right , bottom , e left propriedades. Essas propriedades especificam as compensações em relação ao caixa do bloco contendo . Uma caixa de posicionamento absoluto é removido do fluxo normal inteiramente (não tem impacto sobre os irmãos mais tarde) e atribuiu uma posição com relação a um bloco contendo. Além disso, embora absolutamente posicionado caixas têm margens, não colapso com qualquer outras margens.

Coisas a observar no esta demonstração

• Porque não há caixa de deslocamento for especificado, caixa "dois" não se moveu de sua posição original, mas se tivéssemos usado top:0;left:0; por exemplo, que a caixa estaria no canto superior esquerdo da viewport .
• Layout sábio, é como a caixa "dois" tinham sido decorados com display:none . O caixa foi retirado do fluxo.
• Com caixa "dois" fora do fluxo, 'três' caixa subiu contra a caixa de 'um' (os parágrafos têm seguido).
• Como todos os elementos retirados do fluxo de caixa, 'dois' tem horizontalmente devidamente embalada.

Coisas para lembrar

• Para qualquer elemento 'absoluta' ou 'fixo' posicionou o valor calculado para display é block .
• Para qualquer elemento 'absoluta' ou 'fixo' posicionou o valor calculado para float é none .
• A 'contendo block' é uma caixa que estabelece um contexto de posicionamento. É estabelecido pelo ancestral mais próximo com uma "posição" da "absoluta", "parente" ou "fixo". Isto significa que a caixa-mãe não pode ser o bloco contendo .
• A posição padrão de uma caixa de posicionamento absoluto não é sempre a mesma coisa como se fosse desenhado com top: 0; left: 0; (em um contexto LTR). E isto por duas razões:
  1. O bloco contendo uma caixa posicionada é estabelecida pelo ancestral mais próximo posicionado, se não houver nenhum, o recipiente de referência é o elemento raiz. O bloco contendo em que o elemento raiz vida é um retângulo chamado o bloco inicial contendo. Para mídia contínua, tem as dimensões do viewport (uma janela ou outra área de visualização na tela) e está ancorada na origem de lona. Este exemplo mostra a caixa posicionada em relação ao viewport (o padrão contendo bloco).
  2. O elemento é posicionado em referência à caixa de preenchimento, não a caixa de conteúdo nem a caixa de fronteira do bloco contendo. Este novo exemplo demonstra que caixa "dois" seria se as bordas da caixa de preenchimento não toque nas bordas da caixa de conteúdo (o bloco contendo sendo body ).
• O tamanho da caixa pode ser o resultado do top , right , bottom , e left os valores de propriedade. Para exemplos, zerando todas as propriedades fará o trecho caixa para coincidir com as dimensões da caixa de preenchimento de seu bloco contendo. Ver zerar todos os deslocamentos caixa (nota: ie6 não esticar a caixa).
• Para criar uma sobreposição de máscara que não rola com o documento (como no exemplo anterior ), use fixed em vez de absolute ou estilo de body com position:relative como o bloco de posicionamento inicial é o viewport (styling html não funciona no IE) . Como esta demonstração overlay shows.
• position:absolute triggers haslayout .

Coisa mais importante para se lembrar

Porque este esquema de posicionamento remove caixas do fluxo, é considerado uma má prática de usá-lo para layout.

position: fixed

Da secção 9 modelo de formatação Visual :

Posicionamento fixo é uma subcategoria de posicionamento absoluto. A única diferença é que para uma caixa fixo posicionado, o bloco é estabelecido pela viewport . Para mídia contínua , caixas fixas não se movem quando o documento é rolado. A este respeito, eles são semelhantes a imagens de fundo fixo . Para mídia paginada (onde o conteúdo do documento é dividido em uma ou mais páginas discretas), caixas com posições fixas são repetidos em cada página. Isso é útil para colocar, por exemplo, uma assinatura na parte inferior de cada página. Caixas com posição fixa, que são maiores do que a área da página são cortadas. Peças da caixa de posição fixa que não são visíveis no bloco inicial contendo não será impresso.

Coisas a observar no esta demonstração :

• Desde posicionamento fixo é uma subcategoria de posicionamento absoluto, tudo o que era verdade para "absoluta" também é verdade para "fixo" (o elemento shrink-wraps, ele é removido do fluxo, etc.)
• A caixa é posicionada em relação ao viewport, ele não rola com a página.
• No IE 6, a caixa aparece como uma caixa estática , mas há um "engraçado" solução alternativa para isso.
• Ao imprimir o documento, caixa "dois" aparece em cada página.

Coisas para lembrar:

• A posição do caixa é calculado de acordo com o modelo de "absoluta", mas, além disso, a caixa é fixa com relação a alguns de referência. No caso de portáteis, tela de projeção, tty, e tipos de mídia tv, a caixa é fixa em relação ao viewport e não se move quando rolado.
• Conteúdo pode ser inaccessile para usuários com visão se parte da caixa está fora da área de viewport.
• No caso de o tipo de mídia impressa, os autores podem querer impedir que um elemento de aparecer em cada página impressa. Talvez usando uma regra @ media, como em:

    @ Media print { 
     # Logotipo {position: static;}
   } 

• Como position:absolute , position:fixed irá desencadear haslayout no IE.

posição: herdar

Se position:inherit é especificado para uma caixa de dado, então ele terá o mesmo valor calculado como a propriedade para o pai da caixa.

Note-se que o IE 6 e 7 não suportam esta palavra-chave exceto quando usado com direction e visibility (ver o valor da propriedade CSS herdar ).

Coisas a considerar

Offsets caixa

Estar ciente de que para absolutamente fixa e caixas posicionadas, os valores definidos em porcentagem para top , right , bottom , e left são calculados de acordo com as dimensões do bloco contendo (o que não pode ser o da mãe).

'Posição' e 'estouro'

Uma caixa com o estilo overflow:hidden cortará elementos relativamente posicionados (caixas aninhadas), mas não iremos sempre esconder os posicionados absolutamente. Isso ocorre porque a caixa de pai nem sempre é o bloco contendo (o ancestral mais próximo com uma "posição" da "absoluta", "parente" ou "fixo").

Em resumo, isso significa que elementos posicionados absolutamente irá mostrar fora de uma caixa estilizada com overflow: hidden a menos que seu bloco é a própria caixa ou um elemento dentro da caixa, disse. Esta página de demonstração mostra como as coisas funcionam.

Margens

Os autores podem utilizar as margens dos elementos independentemente do seu esquema de posicionamento.

O caso do IE

No IE, "posicionamento" de uma caixa pode ser uma bênção ou uma maldição:

• No IE6, position:relative (with haslayout) pode ser usado para evitar uma caixa de estilo com margens negativas de ser cortada por um recipiente pai (veja como o posicionamento da caixa corrige esse problema).
• Posicionamento de um elemento pode "perturbar" o caminho pilha caixas no IE 6 e 7, pois isso pode estabelecer um novo contexto de empilhamento (ver um caso de teste ).

Ordem de empilhamento e empilhamento nível

• De acordo com a seqüência no código fonte, caixas posicionadas vir na frente de carros alegóricos e caixas no fluxo normal.
• Os autores podem especificar níveis de pilha via a propriedade 'z-index' somente em caixas posicionado.
• No IE6 e 7, o simples fato de o posicionamento de uma caixa pode estabelecer um contexto de empilhamento (ver acima, " o caso do IE ").

Dispositivos móveis

Leia o artigo de PPK, a [sexta] valor de posição , para descobrir por que os fabricantes de navegadores móveis não pode realmente apoiar position:fixed .

Outras leituras

• Modelo de formatação visual
• Posição (propriedade CSS)
• A declaração de posição

A "fantasma" por analogia DrLangbhani:

Um elemento com posição relativa é sempre compensado em relação à sua posição normal no fluxo. Em outras palavras, ele é deslocado em relação ao que seria em circunstâncias normais, e mudar isso não afeta a disposição dos elementos em torno dele. É como um fantasma que deixou o seu corpo para trás. Um corpo que tem largura e altura e afeta seu entorno, mas é invisível. A caixa de fantasmas é capaz de se mover mas ainda está ligado ao corpo de idade em que a sua posição ainda é medido a partir dele. Agora um elemento com absoluta posição é ainda mais fácil. Já não afeta seu entorno em todos (é puxado para fora do fluxo de layout). É agora um fantasma verdadeiro com nenhum corpo deixado para trás. Na medida em que elementos o seu irmão está preocupado é como se já não existe. Para obter a sua posição, olhar através de cada um dos seus elementos pai até encontrar uma com um position: relative, [posição: fixo,] ou position: absolute. Esse elemento vai servir como ponto de referência. Só se você não encontrar uma "posição" elemento será compensado a partir do documento.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!