CSS: Come avere posizione: div assoluto in una posizione: div relativo non essere ritagliato da un overflow: nascosto su un contenitore

Ho 3 livelli di div :

  • (In verde sotto) div livello superiore con overflow: hidden . Questo perché voglio che alcuni contenuti (non mostrati qui) all’interno di quella casella vengano ritagliati se superano le dimensioni della scatola.
  • (In rosso sotto) Dentro questo, ho div con position: relative . L’unico uso per questo è per il livello successivo.
  • (In blu sotto) Finalmente una div che esco dal stream con la position: absolute ma che voglio posizionata rispetto al div rosso (non alla pagina).

Mi piacerebbe che la scatola blu venisse estratta dal stream e si espandesse oltre il riquadro verde, ma sia posizionata rispetto al riquadro rosso come in:

Tuttavia, con il codice qui sotto, ottengo:

E rimuovendo la position: relative sulla casella rossa, ora la casella blu può uscire dalla casella verde, ma non è più posizionata rispetto alla casella rossa:

C’è un modo per:

  • Mantieni l’ overflow: hidden nella scatola verde.
  • La scatola blu si espande oltre la casella verde e si posiziona rispetto alla scatola rossa?

L’origine completa, con CSS inline a scopo di test:

   


Un trucco che funziona è posizionare la casella n. 2 con position: absolute anziché position: relative . Di solito mettiamo una position: relative su una scatola esterna (qui casella n. 2) quando vogliamo una scatola interna (qui casella n. 3) con position: absolute da posizionare rispetto alla scatola esterna. Ma ricorda: per la casella n. 3 da posizionare rispetto alla casella n. 2, la casella n. 2 deve solo essere posizionata. Con questo cambiamento, otteniamo:

Ed ecco il codice completo con questo cambiamento:

      


Ho aggiunto ulteriori dettagli a riguardo sulla scatola Absolutely position in una scatola con overflow: auto o hidden .

Non esiste una soluzione magica per visualizzare qualcosa al di fuori di un contenitore nascosto overflow.

Un effetto simile può essere ottenuto avendo un div posizionato in modo assoluto che corrisponda alla dimensione del suo genitore posizionandolo all’interno del contenitore relativo corrente (il div che non vuoi clip dovrebbe essere fuori da questo div):

 #1 .mask { width: 100%; height: 100%; position: absolute; z-index: 1; overflow: hidden; } 

Tieni presente che se devi solo ritagliare il contenuto sull’asse x (che sembra essere il tuo caso, dato che hai impostato solo la larghezza del div), puoi usare overflow-x: hidden .

Non vedo davvero un modo per farlo così com’è. Penso che potrebbe essere necessario rimuovere l’ overflow:hidden dal div # 1 e aggiungere un altro div all’interno del div # 1 (cioè come un fratello al div # 2) per contenere il ‘contenuto’ non specificato e aggiungere l’ overflow:hidden a quello invece. Non penso che l’overflow possa essere (o dovrebbe essere in grado di essere) sovraffollato.

Se ci sono altri contenuti che non vengono mostrati all’interno del div esterno (la casella verde), perché non avere quel contenuto avvolto in un altro div, chiamiamolo "content" . Hanno overflow nascosto su questo nuovo inner-div, ma mantiene overflow visibile sulla green box.

L’unico problema è che dovrai fare casino per assicurarti che il contenuto div non interferisca con il posizionamento del riquadro rosso, ma suona come se dovessi essere in grado di aggiustarlo con un po ‘di mal di testa.