Posizionamento assoluto all'interno della posizione assoluta

Ho 3 divelementi.

Il primo divè più grande (avvolgimento) e haposition:relative;

Il 2 ° divè posizionato in assoluto rispetto al 1 ° divposizionamento relativo (ed è incluso nel 1 ° div)

Il 3 ° divè contenuto nel 2 ° dive ha anche il posizionamento assoluto.

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

Perché la 3a divposizione è assoluta rispetto alla 2a div(che è anche posizione assoluta alla 1a div) e non alla 1a divche ha posizione relativa?

Perché il 3 ° divè il posizionamento assoluto rispetto al 2 ° posto assoluto div.

Perché position: absoluteripristina la posizione relativa per i bambini proprio come position: relativefa.

Non c'è modo di aggirare questo: se vuoi che il terzo divsia posizionato in modo assoluto rispetto al primo, dovrai renderlo un figlio del primo.

Entrambi position:relativee position:absolutestabiliscono elementi contenitori come ascensori di posizionamento.

Se hai bisogno che il div 3 sia posizionato in base al div 1, rendilo un figlio diretto del div 1.

Notare che position: relativesignifica che l'elemento è posizionato rispetto alla sua posizione naturale e position: absolutesignifica che l'elemento è posizionato rispetto al suo primo position:relativeo position:absoluteantenato .

Posizione statica: la posizione statica è il modo predefinito in cui un elemento apparirà nel flusso normale del file HTML se non viene specificata alcuna posizione.

Importante: top, right, bottome leftle proprietà hanno alcun effetto su uno STATICAMENTE POSIZIONATA ELEMENTO.

Posizione relativa: posizionare un elemento con il valore relativo mantiene l'elemento (e lo spazio che occupa) nel normale flusso del tuo file HTML.

È quindi possibile spostare l'elemento da una certa quantità utilizzando le proprietà left, right, tope bottom. Tuttavia, ciò potrebbe far sì che l'elemento si sovrapponga ad altri elementi che si trovano sulla pagina, il che potrebbe essere l'effetto desiderato o meno.

Un elemento relativamente posizionato può spostarsi dalla sua posizione, ma lo spazio che occupava rimane.

Posizione assoluta: l' applicazione del valore di posizione assoluta a un elemento lo rimuove dal flusso normale. Quando si sposta l'elemento posizionato in modo assoluto, il suo punto di riferimento è la parte superiore / sinistra dell'elemento contenitore più vicino che ha una posizione dichiarata diversa da statica, chiamata anche contesto di posizionamento più vicino. Quindi, se non esiste alcun elemento contenitore con una posizione diversa da statica, verrà posizionato dall'angolo superiore sinistro dell'elemento del corpo.

Nel tuo caso il contenitore contenitore più vicino al 3 ° è il 2 °.

Ancora un'altra risposta chiarificatrice.

Il tuo scenario attuale è questo:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

E stai un po 'lottando con esso.

Se puoi modificare l'HTML, fai semplicemente questo:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

Il motivo per cui il 3 ° divelemento è posizionato in modo assoluto rispetto al 2 ° divelemento è perché, come spiegato qui dalle specifiche CSS , è perché l'elemento "genitore" (meglio detto: blocco contenente) di un elemento posizionato in modo assoluto non è necessariamente il suo elemento genitore immediato, ma piuttosto il suo elemento posizionato immediatamente , ovvero qualsiasi elemento la cui posizione è impostata su qualsiasi cosa tranne che staticper esempioposition: relative/absolute/fixed/sticky;

Quindi, quando possibile nel tuo codice, se vuoi che il terzo divelemento sia posizionato in modo assoluto rispetto al primo div, dovresti rendere il tuo secondo divelemento come il position: static;suo valore predefinito (o semplicemente rimuovere qualsiasi position: ...dichiarazione nel set di regole del tuo secondo divelemento) .

Quanto sopra renderà il 1 ° divil blocco contenitore del 3 ° assolutamente posizionato div, ignorando il 2 ° divper questo scopo di posizionamento.

Spero che sia d'aiuto.

Nel caso qualcuno stia ancora cercando una risposta a questo.

Sono stato in grado di ottenere questo risultato aggiungendo uno clear: both;stile al primo div posizionato in modo assoluto che ha resettato il bambino e gli ha permesso di utilizzare il proprio absoluteposizionamento.