Explicação detalhada do uso do atributo position em HTML (quatro tipos)

Os quatro valores de atributos de posição:

1.relativo

2.absoluto

3. fixo

4.estático

Esses quatro atributos são descritos abaixo.

 <div id=parent> <div id=sub1>sub1</div> <div id=sub2>sub2</div></div>

O atributo relativo é relativamente simples. Precisamos descobrir de qual objeto ele é compensado. A resposta está em sua localização. No código acima, sub1 e sub2 estão em um relacionamento de irmãos. Se você definir um atributo relativo de sub1, por exemplo, defina o seguinte código CSS:

 #sub1{ posição: relativo; preenchimento: 5px; superior: 5px esquerda: 5px;}

Podemos entender que se o atributo relativo não estiver definido, a posição de sub1 deverá estar em uma determinada posição de acordo com o fluxo normal do documento. Mas quando a posição de sub1 é definida como relativa, ela será deslocada de acordo com sua suposta posição de acordo com os valores superior, direito, inferior e esquerdo. O significado relativo de relativo também se reflete nisso.

Para isso, você só precisa lembrar onde sub1 deveria estar se você não definir relativo, e deslocá-lo de onde deveria estar depois de definido.

A questão subsequente é: onde está a posição do sub2? A resposta é onde estava antes e onde está agora. Sua posição não mudará porque sub1 adiciona o atributo position.

O que acontecerá se a posição de sub2 também for definida como relativa neste momento? Neste momento, ainda é igual a sub1, deslocado de acordo com sua posição original.

Observe que o deslocamento relativo se baseia no lado superior esquerdo da margem do objeto.

Esta propriedade é sempre enganosa. Diz-se que quando o atributo position é definido como absoluto, ele é sempre posicionado de acordo com a janela do navegador. Na verdade, isso está errado. Na verdade, esta é uma característica das propriedades fixas.

Quando a posição de sub1 é definida como absoluta, quem é usado como objeto a ser compensado? Existem duas situações aqui:

(1) Quando o objeto pai de sub1 (ou bisavô, desde que seja um objeto pai), o pai também define o atributo de posição, e o valor do atributo de posição é absoluto ou relativo, ou seja, não é o valor padrão, então sub1 segue. Este pai é usado para posicionamento.

Observe que embora o objeto tenha sido determinado, existem alguns detalhes que requerem sua atenção, ou seja, qual ponto de posicionamento do pai devemos utilizar para posicioná-lo? Se o pai definir atributos como margem, borda, preenchimento, etc., então este ponto de posicionamento irá ignorar o preenchimento e será posicionado a partir do início do preenchimento (ou seja, começando apenas no canto superior esquerdo do preenchimento), isto é, ignorando o preenchimento, é claro que não irá ignorar margem e borda.

A próxima pergunta é: onde está a localização do sub2? Porque quando a posição é definida como absoluta, isso fará com que sub1 ultrapasse o fluxo normal do documento, como se não pertencesse ao pai, ele flutua para cima. É chamado de camada no DreamWeaver, mas na verdade significa a mesma coisa. Neste momento, sub2 obterá a posição de sub1 e seu fluxo de documentos não será mais baseado em sub1, mas começará diretamente do pai.

(2) Se sub1 não tiver um objeto pai com um atributo de posição, então o corpo será usado como objeto de posicionamento e posicionado de acordo com a janela do navegador. Isso é mais fácil de entender.

Fixo é um absoluto especial, ou seja, fixo sempre utiliza o corpo como objeto de posicionamento e é posicionado de acordo com a janela do navegador. Mesmo que a barra de rolagem seja arrastada, sua posição não será alterada. Semelhante a anexo em segundo plano:fixo

É claro que parece não haver suporte no Dreamweaver

O valor padrão da posição Geralmente, quando o atributo posição não está definido, ele será organizado de acordo com o fluxo normal do documento.

O texto acima é o uso da posição em HTML introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!