Como definir a posição absoluta, mas em relação ao pai

Como definir a posição absoluta, mas em relação ao pai
Definir a posição absoluta de uma criança em relação a seus pais significa definir a posição do elemento filho de tal maneira que as propriedades de posição aplicadas ao trabalho de TI de acordo com a área e a posição do elemento pai e não com toda a interface, isso é feito adicionando a propriedade de posição com o valor absoluto para o elemento filho ou div.

Definindo posição absoluta em relação ao pai Div

A posição pode ser definida de acordo com a DIV pai, adicionando propriedades de posição no elemento de estilo CSS.

Vamos discutir isso com a ajuda de um exemplo simples em que há uma divis de pai e duas crianças divididas a ela:


Pai



Eu sou o primeiro filho!!!




Eu sou o segundo filho ..



No trecho de código acima, há uma divisora ​​de pais e tem duas crianças divididas:

  • Existe a tag div que tem o ID declarado como “pai,”E dentro da div, há um

    indo como conteúdo a ser exibido dentro da área div.

  • Então, há o filho dividir dentro da divadChild1““.
  • Da mesma forma, há outra tag infantil que declara o ID da div como “Child2““.

Isso exibirá os seguintes resultados:

Para definir a posição absoluta do “Child1" e "Child2”Relevante para a divisão dos pais, é necessário adicionar as propriedades absolutas da posição CSS para as crianças e posicionar a propriedade relativa para a divisão pai:

#parent
Posição: relativa;

#Child1
Posição: Absoluto;

#Child2
Posição: Absoluto;

O cabeçalho criado no pai Div não se moverá, mas os da criança dividem sua posição em relação à posição do pai Div. Isso exibirá a seguinte interface na saída:

É assim que podemos definir a posição absoluta em relação à divisão dos pais.

Conclusão

A posição absoluta do Child Divs em um documento HTML pode ser definido em relação à divisão dos pais de tal maneira que as propriedades CSS adicionadas para as crianças DIVs implementam de acordo com a posição de seus pais div. Isso é feito adicionando a propriedade de posição absoluta no elemento de estilo CSS referente à classe ou ID da criança dividida.