Fare una div relativa fissa nella parte superiore dello schermo

Devo fare in modo che #outer1 sia corretto nella parte superiore dello schermo, ma non posso farlo senza fare confusione con le posizioni attuali. Non posso semplicemente fissare #outer1 , poiché ho bisogno che sia relativo, perché i div all’interno devono essere posizionati in modo assoluto. Cosa dovrei fare invece di rendere #outer1 da #outer1 nella parte superiore dello schermo?

 div { border: 1px solid black; } #outer1 { height: 100px; position: relative; } #outer2 { height: 900px; } #left { display: inline-block; } #right { display: inline-block; position: absolute; right: 0; } 
 
Left

Non posso semplicemente #outer , poiché ho bisogno che sia relativo, perché i div all’interno devono essere posizionati in modo assoluto.

Semplicemente perché la disposizione più comune per i bambini posizionati in modo assoluto coinvolge un genitore relativamente posizionato, non significa che sia l’unico modo.

La regola per gli elementi posizionati in modo assoluto è che il loro blocco contenitore è l’ antenato posizionato più vicino . #outer1 con position fixed è un antenato posizionato, quindi si qualifica. È solo che il 99% delle volte le persone usano la position: relative dal momento che ha un impatto minimo sul genitore.

Non c’è nessun problema nell’usare la position: fixed come un blocco contenitore per i bambini posizionati in modo assoluto.

Da MDN:

Un elemento posizionato è un elemento la cui proprietà di posizione calcasting è relative , absolute , fixed o sticky . (In altre parole, qualsiasi cosa diversa da static )

Un elemento relativamente posizionato è un elemento la cui proprietà di posizione calcasting è relative .

Un elemento posizionato in modo assoluto è un elemento la cui proprietà di posizione calcasting è absolute o fixed .

Un elemento posizionato in modo stilizzato è un elemento la cui proprietà di posizione calcasting è sticky .

Le proprietà top , right , bottom e left specificano la posizione degli elementi posizionati.

L’elemento posizionato in modo assoluto è posizionato rispetto all’antenato posizionato più vicino (non statico) . Se un antenato posizionato non esiste, viene utilizzato il contenitore iniziale.

fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Puoi ancora avere elementi figlio posizionati in modo assoluto in un div con posizione fixed , non deve essere specificamente relativo, semplicemente non può essere static , il valore predefinito per la position

 body { margin: 0; padding: 0; } div { border: 1px solid black; } #outer1 { height: 100px; position: fixed; width: 100%; } #outer2 { height: 900px; } #left { display: inline-block; } #right { display: inline-block; position: absolute; right: 0; } 
 
Left