Posição CSS (Posição)

A propriedade position do CSS é usada para especificar como um elemento é posicionado na página, e os métodos de posicionamento Position (posicionamento) do CSS têm os seguintes tipos: posicionamento estático (static), posicionamento absoluto (absolute), posicionamento relativo (relative), posicionamento fixo (fixed).

Métodos de posicionamento do CSS

Posicionar elementos de maneira apropriada na página é necessário para um design de layout de boa qualidade. Existem várias maneiras de posicionar elementos no CSS. No próximo capítulo, apresentaremos essas maneiras de posicionamento uma a uma.

Posicionamento estático (static)

Sempre posiciona os elementos estáticos de acordo com o fluxo normal da página. Os elementos HTML estão em posição estática por padrão. Os elementos de posicionamento estático não afetamtop,bottom,left,right, ez-índiceCaracterísticas.

Se não for especificado o valor da propriedade position do elemento, ou seja, no caso padrão, o elemento é posicionado estáticamente. Qualquer objeto HTML que suporte a propriedade position é definido como static por padrão. 'static' é o valor padrão da propriedade position, que indica que o bloco permanece na posição original e não é reposicionado.
Em essência, na maioria das vezes, não precisamos usar 'position:static'; no entanto, quando usamos JavaScript para controlar a posição dos elementos, se quisermos que outros elementos de posicionamento se tornem estáticos, devemos usar 'position:static;' para realizá-lo.

.box {
　　　　preenchimento:　20px;
　　　　background: #7dc765;
}

Alinhamento relativo (relative)

Os elementos alinhados de forma relativa são alinhados em relação à sua posição normal.

No esquema de alinhamento relativo, a posição da caixa do elemento é calculada com base no fluxo normal. Em seguida, com base nas propriedades- top ou bottom e/ou left para mover a caixa da posição normal ou right.

.box {
　　　　position: relativo;
　　　　esquerda:　100px;
}

Alinhamento absoluto (absolute)

Os elementos alinhados de forma absoluta são alinhados em relação ao primeiro elemento pai com posição não estática. Se não encontrar tal elemento, coloque-o na página em relação ao canto superior esquerdo da janela do navegador. Pode usar uma ou mais propriedades de deslocamento top, right, bottom e left para a utilização adicional de caixas.

Os elementos alinhados de forma absoluta são completamente removidos do fluxo normal, portanto, não ocupam espaço ao alinhar elementos de igual nível. No entanto, dependendoz-índiceO valor da propriedade, que pode se sobrepor a outros elementos. Além disso, os elementos alinhados de forma absoluta podem terMargemE elas não se fundem com outras margens.

.box {
　　　　position: absoluto;
　　　　cima:　200px;
　　　　esquerda:　100px;
}

Alinhamento fixo (fixed)

A alinhamento fixo é uma subcategoria da alinhamento absoluto.

A única diferença é que os elementos alinhados de forma fixa são fixos em relação à viewport do navegador e não se movem ao rolar.

.box {
　　　　position: fixo;
　　　　cima:　200px;
　　　　esquerda:　100px;
}