Come impostare la posizione assoluta ma relativa al genitore

Come impostare la posizione assoluta ma relativa al genitore
L'impostazione della posizione assoluta di un figlio rispetto al suo genitore significa impostare la posizione dell'elemento figlio in modo tale che le proprietà di posizione applicate all'IT funzionano in conformità con l'area e la posizione dell'elemento genitore e non con l'intera interfaccia, questo viene fatto aggiungendo la proprietà di posizione con il valore assoluto per l'elemento figlio o Div.

Impostazione della posizione assoluta rispetto a Parent Div

La posizione può essere impostata in base al Parent Div aggiungendo proprietà di posizione nell'elemento in stile CSS.

Discutiamolo con l'aiuto di un semplice esempio in cui esiste un Parent Div e due figli di bambino ad esso associati:


Genitore



Sono il primo figlio!!!




Sono il secondo figlio ..



Nello snippet di codice sopra, c'è un Div genitore e ha due figli di figlio:

  • C'è il tag DIV che ha l'ID dichiarato come "genitore,"E all'interno del Div c'è un

    Intestazione come contenuto da visualizzare all'interno dell'area Div.

  • Quindi, c'è il figlio di div all'interno del genitore div che ha l'ID dichiarato come "Child1".
  • Allo stesso modo, esiste un altro tag di Div per bambini che dichiara l'ID del Div come "Child2".

Questo visualizzerà i seguenti risultati:

Per impostare la posizione assoluta del "Child1" E "Child2"Rilevante per il Div genitore, è solo necessario aggiungere le proprietà assolute della posizione CSS per i DI DIV figlio e la proprietà relativa della posizione per il Parent Div:

#genitore
Posizione: relativo;

#Child1
Posizione: assoluto;

#Child2
Posizione: assoluto;

L'intestazione creata nel Parent Div non si muoverà, ma quelli dei Div figlio cambiano la loro posizione rispetto alla posizione del Parent Div. Questo visualizzerà la seguente interfaccia nell'output:

Ecco come possiamo impostare la posizione in assoluto rispetto al genitore div.

Conclusione

La posizione assoluta dei DI DI del bambino in un documento HTML può essere impostata rispetto al proprio Div genitore in modo tale che le proprietà CSS aggiunte per il bambino Div implementano in base alla posizione del loro genitore. Questo viene fatto aggiungendo la proprietà di posizione assoluta nell'elemento in stile CSS che si riferisce alla classe o all'ID del bambino div.