Cómo establecer la posición absoluta pero en relación con el padre

Cómo establecer la posición absoluta pero en relación con el padre
Establecer la posición absoluta de un niño en relación con su padre significa establecer la posición del elemento infantil de tal manera que las propiedades de posición aplicadas a él funcionen de acuerdo con el área y la posición del elemento principal y no con toda la interfaz, esto, esto se realiza agregando la propiedad de posición con el valor absoluto para el elemento infantil o diviv.

Establecer una posición absoluta en relación con el padre Div

La posición se puede establecer de acuerdo con el DIV principal agregando propiedades de posición en el elemento de estilo CSS.

Discutamos esto con la ayuda de un ejemplo simple en el que hay un Div Padre y dos Divs de Niños asociados con él:


Padre



Soy el primer hijo!!!




Soy el segundo niño ..



En el fragmento de código anterior, hay un Div Padre, y tiene dos Divs infantiles:

  • Existe la etiqueta Div que tiene la identificación declarada como "padre,"Y dentro del div, hay un

    encabezarse como el contenido que se exhibirá dentro del área de Div.

  • Luego, está el niño Div dentro del Div Padre que tiene la identificación declarada como "Niño1".
  • Del mismo modo, hay otra etiqueta de Div Child que declara la identificación del Div como "niño2".

Esto mostrará los siguientes resultados:

Para establecer la posición absoluta del "Niño1" y "niño2"Relevante para el DIV principal, solo se requiere agregar las propiedades absolutas de la posición CSS para los Divs del Niño y la propiedad relativa de posición para el Div Parent:

#parent
Posición: relativo;

#Child1
Posición: Absoluto;

#Child2
Posición: Absoluto;

El encabezado creado en el Div Padre no se moverá, pero los de los Divs del Niño cambian su posición en relación con la posición del Div Padre. Esto mostrará la siguiente interfaz en la salida:

Así es como podemos establecer la posición absoluta en relación con el Div padre.

Conclusión

La posición absoluta de los Divs de los niños en un documento HTML se puede establecer en relación con sus padres Div de tal manera que las propiedades CSS agregadas para los Divs del Niño se implementan de acuerdo con la posición de sus padres Div. Esto se hace agregando la propiedad de posición absoluta en el elemento de estilo CSS que se refiere a la clase o ID del niño Div.