CSS: Come avere posizione: div assoluto all'interno di una posizione: div relativo non essere ritagliato da un overflow: nascosto su un contenitore

144

Ho 3 livelli di div:

(In verde sotto) Un livello superiore divcon overflow: hidden. Questo perché voglio che alcuni contenuti (non mostrati qui) all'interno di quella scatola vengano ritagliati se supera le dimensioni della scatola.
(In rosso sotto) All'interno, ho divcon position: relative. L'unico uso per questo è per il livello successivo.
(In blu di seguito) Finalmente divestraggo il flusso con position: absolutema che voglio posizionato rispetto al rosso div(non alla pagina).

Vorrei che la scatola blu fosse estratta dal flusso e si espandesse oltre la scatola verde, ma che fosse posizionata rispetto alla scatola rossa come in:

Tuttavia, con il codice seguente, ottengo:

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

C'è un modo per:

Conserva la overflow: hiddencasella verde.
La casella blu si è espansa oltre la casella verde ed è posizionata rispetto alla casella rossa?

La fonte completa:

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}

<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

Espandi frammento

css overflow css-position

— avernet
fonte

44

+1 per domande ben formattate e codice sorgente

— graphicdivine,

Chiarimento: Quindi vuoi che la scatola blu (il div più interno) sia in grado di traboccare dalla scatola verde (il div più esterno) ma mantenga il trabocco nascosto sulla scatola verde? Quindi, fondamentalmente, hai l'overflow nascosto su tutto nella casella verde TRANNE la casella blu, giusto?

— Anthony,

Anthony, sì, è esattamente così. E non mi interessa cosa succede alla scatola rossa (n. 2), che è proprio lì per influenzare la parte superiore / destra sulla scatola blu (n. 3).

— avernet,

2

+1 per spiegare correttamente una domanda che pensavo fosse troppo difficile da spiegare ma che volevo davvero una risposta.

— Andrew Mao,

position: fixedignorerà il overflow:hiddendi qualsiasi elemento contenente.

— Kevin Beal,

48

Un trucco che funziona è posizionare la casella n. 2 con position: absoluteinvece di position: relative. Di solito position: relativeinseriamo un box esterno (qui box # 2) quando vogliamo che un box interno (qui box # 3) position: absolutevenga posizionato rispetto al box esterno. Ma ricorda: per posizionare la casella n. 3 rispetto alla casella n. 2, la casella n. 2 deve solo essere posizionata. Con questa modifica, otteniamo:

Ed ecco il codice completo con questa modifica:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

— avernet
fonte

5

in realtà l'ho usato position: statice ha funzionato meglio per me

— Jason,

@Jason, molto interessante; quindi stai dicendo che usi position: staticsulla casella # 2 anziché position: absolute.

— avernet,

1

Puoi spiegare perché absolutenon taglia ma lo relativefa?

— Andrew Mao,

1

Questa soluzione non funzionerà se non si rende assoluto tutto tra il n. 1 e il n. 3. In pratica, questo è impossibile.

— windmaomao,

1

— Mi chiedo

5

Non esiste una soluzione magica per mostrare qualcosa al di fuori di un contenitore nascosto traboccante.

Un effetto simile può essere ottenuto avendo un div posizionato in modo assoluto che corrisponde alla dimensione del suo genitore posizionandolo all'interno del contenitore relativo corrente (il div che non si desidera tagliare dovrebbe essere al di fuori di questo div):

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

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

— morsa
fonte

0

Non vedo davvero un modo per farlo così com'è. Penso che potresti dover rimuovere il overflow:hiddendiv # 1 e aggiungere un altro div all'interno del div # 1 (ovvero come un fratello del div # 2) per contenere il tuo 'contenuto' non specificato e aggiungere overflow:hiddeninvece quello a. Non penso che l'overflow possa essere (o dovrebbe essere in grado di essere) superato.

— graphicdivine
fonte

0

Se c'è altro contenuto che non viene mostrato all'interno del div esterno (la casella verde), perché non avere quel contenuto racchiuso in un altro div, chiamiamolo "content". Hai nascosto l'overflow su questo nuovo div-interno, ma tieni visibile l'overflow sulla casella verde.

L'unico problema è che dovrai quindi scherzare per assicurarti che il div del contenuto non interferisca con il posizionamento della scatola rossa, ma sembra che dovresti essere in grado di risolverlo con un piccolo mal di testa.

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>

— Anthony
fonte