|
|
Publicado em 30/10/2014 14:39:28
|
|
|
Definir esse valor de propriedade como absoluto arrasta o objeto para fora do posicionamento absoluto normal do fluxo do documento, independentemente do layout do conteúdo ao seu redor. Se outros objetos com diferentes propriedades de índice z já ocupam uma determinada posição, eles não se afetarão, mas se sobreporão na mesma posição. O objeto não possui uma mancha externa (margem), mas ainda possui uma mancha interna (batida) e uma borda (borda).
Para ativar o posicionamento absoluto de um objeto, você deve especificar pelo menos um dos atributos left, right, top, bottom e definir esse valor de atributo como absoluto. Caso contrário, os atributos acima usarão seu valor padrão auto, o que fará com que o objeto siga as regras normais de layout HTML e seja renderizado imediatamente após o objeto anterior.
Os atributos TRBL (TOP, RIGHT, BOTTOM, LEFT) são válidos apenas se o atributo position estiver definido.
Você deve definir posição:absoluto
Se o pai (infinito) não definir o atributo posição, então o valor absoluto atual é posicionado em combinação com o atributo TRBL no canto superior esquerdo do navegador como ponto original
Se o pai (infinito) define a propriedade de posição, então o absoluto atual é posicionado em combinação com a propriedade TRBL no canto superior esquerdo do pai (recente) como ponto original.
Ao definir a posição: relativa
O canto superior esquerdo da área de conteúdo pai (recente) é o ponto original combinado com o atributo TRBL (ou deslocamento em relação ao elemento anterior do elemento posicionado na área de conteúdo pai), e o canto superior esquerdo do CORPO é o ponto original sem o pai. O posicionamento relativo não pode ser em camadas. Ao usar posicionamento relativo, o elemento ainda ocupa seu espaço original, independentemente de ser movido ou não. Portanto, mover um elemento faz com que ele sobrescrita outras caixas.
De modo geral, se a página da web estiver centralizada, é fácil cometer erros ao usar o Absoluto, porque a página da web sempre se adaptou automaticamente ao tamanho da resolução, enquanto o Absoluto usará o canto superior esquerdo do navegador como ponto original e não mudará a posição devido à mudança de resolução. Às vezes, também é necessário confiar no índice z para definir a relação entre o superior e o inferior do recipiente, quanto maior o valor, maior o topo, e o intervalo numérico é um número natural. Claro, uma coisa a se notar é que a relação pai-filho não pode ser definida com o índice z, e o nível filho deve estar acima e abaixo do pai.
Definir esse valor de propriedade para relativo mantém o objeto no fluxo HTML normal, mas sua posição pode ser deslocada com base no objeto anterior. Texto ou objetos que seguem um localizador relativo ocupam seu próprio espaço sem cobrir o espaço natural do objeto posicionado. Em contraste, o texto ou objeto após o objeto de posicionamento absoluto ocupa seu espaço natural antes que o objeto alvo seja arrastado para fora do fluxo normal do documento. Colocar um objeto de posicionamento absoluto fora da viewport faz com que uma barra de rolagem apareça. Colocar um objeto de posicionamento relativo fora da área de visualização não aparece com uma barra de rolagem. Na verdade, o principal problema com o posicionamento é lembrar o significado de cada posicionamento. Posicionamento relativo é a posição inicial do elemento "relativo" ao fluxo do documento, enquanto posicionamento absoluto é o elemento ancestral que foi posicionado "relativo" ao mais recente.
Aqui estão as adições:
Embora eu conheça o posicionamento absoluto (absoluto) e relativo do CSS, nunca escrevi os efeitos relevantes sozinho!
Depois de trabalhar por mais de meio dia, pode ser considerado completo! Também descobri alguns desses dois atributos!
O resumo é o seguinte:
Vamos dar uma olhada primeiro na estrutura de camadas a seguir
<body>
<div id=posi>
<div id=rel> Esta camada se aplica apenas position:relative; Estilo </div>
<div id=abs> Esta camada aplica apenas posição:absoluta; Estilo </div>
<div id=sss> não aplica <div>estilos
</div>
</body>
1. Absoluto: Não ocupa assento, relativo: tem lugar!
Como a superestrutura:
Camadas com id rel ocuparão uma linha quando exibidas! A camada de ABS atrás dele só aparece na próxima linha!
Quando a camada com o ID ABS for exibida, ela vai se sobrepor com o ID do SSS atrás!
2. Por padrão (não posicionado em combinação com o top, etc.), o absoluto (posicionamento absoluto) é posicionado pela camada mãe
Por exemplo, se a camada acima com ID for ABS, se não estiver posicionada em combinação com TOP, sua posição de exibição será com a camada pai POSI (POSI está no canto inferior esquerdo do documento e também estará no canto inferior esquerdo)
3. Ao combinar atributos superior, inferior, direito, esquerdo e outros, o absoluto (posicionamento absoluto) é posicionado com a janela como posicionamento, e relativo é deslocado com sua própria ocupação como linha base! Conforme segue:
<body>
<div id=posi>
<div id=sss> não aplica <div>estilos
<div id=rel> Esta camada aplica position:relative; base: 30px; Estilo </div>
<div id=abs> Esta camada aplica apenas posição:absoluta; base: 30px; Estilo </div>
</div>
</body>
Código acima:
A camada com o id rel sobe e sobrepõe a camada com o id SSS
A camada com ID ABS será movida para uma posição 30 pixels afastada da janela, tendo a janela como linha de base!
4. Ao combinar atributos superior, inferior, direito, esquerdo e outros, se você quiser que o posicionamento absoluto (absoluto) use a camada mãe como linha base de posicionamento, pode aplicar atributos absolutos ou relativos na camada mãe! Conforme segue:
<body>
<div id=posi style="position:relative">
<div id=rel> Esta camada aplica position:relative; base: 30px; Estilo </div>
<div id=abs> Esta camada aplica apenas posição:absoluta; base: 30px; Estilo </div>
</div>
</body>
O código: id acima é a camada de posi, você também pode usar o atributo absoluto!
id é a camada de REL, que não é afetada, e é compensada por seu próprio marcador como base!
A camada com id como ABS é baseada na borda inferior da camada POSI como linha base de posicionamento; se a altura da camada POSI for menor que 30px nesse momento, a camada ABS pode não conseguir vê-la!
|
Anterior:Alunos de Wu Ruan, por favor, não vão para "Guangbutun" comprar um computador! Para não ser enganado!Próximo:Como faço para remover o sublinhado de um hiperlink em html?
|
