Detalhado e posicionamento de várias aplicações em CSS

posicionamento css

Existem três básico mecanismo de posicionamento CSS: o fluxo geral, o fluxo de flutuabilidade, posicionamento fluxo.
Em que:
o fluxo normal de: cima para baixo, da esquerda para a direita
do fluxo de flutuabilidade: Adicionado elemento flutuador:;
bitstream: Adicionado posicionando propriedades

Um dos elementos no fluxo de documentos:

1. Quando o fluxo dos elementos do documento no lugar, fora dos elementos no documento ignora o fluxo
2. elementos de fluxo de documentos no cálculo da altura automática ignoradas fora dos elementos no fluxo de documentos

Posicionando maneira: posição

valores de propriedade posição:

• coordenadas configuração padrão estáticos são inválidos
• absoluto posicionamento absoluto
  1: a partir do fluxo de documentos, não ocupa a posição
  2: ponto de referência padrão 00 html (zero browser)
  3: Se você tem um pai, e o pai de um posicionamento, que remete para o elemento pai (exceto para posicionamento padrão) bastante em referência às sub-elementos dos mesmos designados
  finalidades: a necessidade de sobreposição na página podem ser utilizados onde o posicionamento absoluto
• relativa: o posicionamento relativo de
  1: ocupando fluxo documento, que representa a posição
  2: com referência à sua posição de carregamento da página nas
  fins: em primeiro lugar para proporcionar o posicionamento absoluto bloco compreendendo
• fixo: posicionamento fixo
  1: a partir do fluxo de documentos, não ocupando
  2: Elementos com o rolo principal e estacionária de deslocamento da página, barras de posicionamento vai ser afectado pelo impacto.
  03:00 ponto de navegador de referência
  usa: na página com uma janela com elementos móveis (por exemplo, voltar ao topo)
• Fixo: Localização pegajosa
  1: a página atinge uma certa altura, a partir do fluxo de documentos
  2: efeito superior do navegador adsorção

coordenada de posição

• Horizontal esquerda direita
• bottom top Vertical

posicionamento relativo e absoluto de diferença

1, uma referência diferente, a referência absoluta que compreende o posicionamento do bloco (elemento pai-alvo), está posicionada no lado oposto do elemento de referência próprio padrão de localização;
2, o posicionamento absoluto de objectos fora do fluxo do documento e, portanto, não leva espaço, o posicionamento relativo não interromper o fluxo normal do documento, independentemente do fim de mover-se, os elementos ainda ocupar o espaço original.

A seguir estão o posicionamento absoluto e relativo do mapa detalhada:

elemento hierarquia posicionamento

z-index: auto | número

ordem de recuperação ou empilhamento do objecto.
auto: default.
número: valor inteiro sem unidade pode ser negativo.

1. não está definido índice z, e, finalmente, escrever o objecto apresentado na camada superior, preferencialmente, desde que, quanto maior for o valor, mais contra a camada superior;
2. índice z pode ser negativo, se for negativo, a rotina de fluxos encontrado, elementos de flutuação, que serão cobertas
3. O elemento (cor) superpostas, a qual elemento (cor) da frente, o qual elemento (cor) para a parte traseira, o conjunto de índice z, quanto maior for o valor da frente

elementos de posicionamento centrado maneira

Uma maneira:

	position: absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	margin:auto;

A segunda maneira:

	position:absolute;
	top:50%;
	left:50%;
	margin-left:-50px;
	margin-top:-50px;

posicionando Precauções

1. Um elemento, desde que a posição de que o valor não é estática, considerado o elemento é posicionado elementos
2. caixa de deslocamento não terá qualquer impacto sobre outras caixas
3. O elemento de posicionamento é fornecido índice z apenas eficaz
4. Absoluto posicionamento absoluto, elemento de posicionamento fixo deve ser fixada caixas bloco
5. Absolute posicionamento, elementos posicionamento fixo fixas absolutas não deve flutuador
6. Margem há fusão

elementos de posicionamento aplicação

Há elementos de uma relação hierárquica (relação de posicionamento e posicionamento absoluto):

foto efeito fluxo de ampliação (posicionamento absoluto):

menu secundário (posicionamento absoluto):


botão de página ea legenda da imagem na parte inferior do diagrama carrossel (posicionamento absoluto):

cobertura de tela de login camada de tampão / ecrã completo (posicionado de forma fixa):

a navegação barra lateral (posicionado de forma fixa):

adsorvido para o topo da navegação navegador (viscosidade posicionando):