Come posso ottenere un div in posizione assoluta per estendersi al di fuori del suo parent parent generato, che ha overflow: auto?

Ho un div relativamente posizionato, che ha overflow: auto set. All’interno di questo, ho un div che funge da una sorta di menu a discesa. Voglio che il div dropdown si estenda al di fuori del genitore quando è necessario, ma viene ritagliato, poiché il genitore ha overflow: auto .

Mi rendo conto che questo è il comportamento corretto, ma non sono sicuro di come ottenere ciò che voglio. Ecco alcuni esempi di codice HTML che illustrano il problema:

 

proprio div è contestualmente rilevante per l’altro contenuto overflow: auto div, quindi ha senso tenerli insieme. Suppongo che potrei usare javascript per spostare il div di dropdown in un’altra parte del DOM, ma preferirei non farlo se posso evitarlo.

Il tuo problema è la posizione: genitore relativo. Dato che hai quel posizionamento sull’elemento, la scatola interna rimarrà SEMPRE entro l’overflow (posizione: assoluta è relativa al genitore posizionato più vicino).

Per evitare il problema, puoi rimuovere la “posizione: relativa” dal div esterno e aggiungere un div wrapper con “position: relativo;”. Dovrai quindi aggiungere “top: 0;” dichiarazione al tuo div interno (dovresti sempre averlo, in realtà).

Il risultato finale è un div extra, e assomiglia a questo: (puoi rimuovere lo stile “z-index: -1”, l’ho appena aggiunto in modo da poter vedere meglio il risultato)

 
if there is some really long content here, it will cause overflow, but the green box will not

Non sono sicuro di come ottenere ciò che voglio.

Nemmeno io – maggiori informazioni su quello che vuoi?

Forse sarebbe una buona idea separare l’elemento con overflow dall’elemento con ‘position: relative’, specialmente se è usato solo per localizzare l’assoluto all’interno.

 
...
...

Date le vostre specifiche, questo è il meglio che ho potuto inventare:

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lì hai il tuo div con overflow: auto; in questo modo verranno visualizzate le barre di scorrimento, se necessario, e il div dell’elenco a discesa sembrerà che si estenda “al di fuori del suo genitore”. Entrambi sono tenuti insieme sotto lo stesso div genitore, come hai affermato che erano contestualmente pertinenti l’uno con l’altro.

Usi il posizionamento assoluto del div interno per posizionarlo rispetto al div esterno, ma non vuoi che il suo contenuto contenga il contenuto div esterno. Per ottenere ciò, è necessario separare la posizione div interna dal contenuto div interno. Puoi provare a farlo mettendo il contenuto in div fisso.

    Test   

Il trucco è che il div fisso con la parte superiore / inferiore / sinistra / destra specificata si posizionerà nella sua posizione “statica”, che sembra essere quello di cui hai bisogno.

Potresti avere problemi con l’ordine z, ma, dalla tua spiegazione, vuoi che il tuo “menu” sia sopra ogni altra cosa. (Presumo che vada e viene). Avrai sicuramente problemi a stampare la pagina – se c’è più di una pagina, l’elemento fisso si ripete.

Come ha sottolineato jvenema, questo non funzionerà in IE6. 🙁

È imansible. Se imposti l’ overflow:auto sul DIV principale, questo blocca qualsiasi DIV secondario dall’influenza della casella del contenuto.

Potresti provare a giocherellare con i valori z-index , ma questo potrebbe farti diventare cieco nell’occhio sinistro.

Un’idea sarebbe quella di avvolgere il DIV padre con un altro DIV in modo che il DIV che si desidera venga posizionato verrà posizionato in base al DIV nonno. Ma in questo modo ti daranno tunnel carpale e non funzionerà neanche perché dovresti sapere dove si trova il stream del genitore DIV che vuoi che diventi il ​​figlio DIV.

Basta rimuovere l’ overflow: auto part e chiudere correttamente il div interno con un tag di chiusura, in questo modo funziona in IE6, IE7, Firefox 3 e Opera => probabilmente tutti i browser.

Direi che è sensibile al contesto è ciò che sta causando problemi. Forse potresti ristrutturare come viene impostato? Avrei una class div genitore che fornisce il contesto a questi due, e li ho separati gli uni dagli altri all’interno di questo div (usando il posizionamento relativo per allinearli come vuoi?)

Il mio 2c

Prova a utilizzare l’overflow: visibile; anziché.