CSS: come averli Posizione: div assoluta all'interno di un position: relative non DIV essere ritagliata da un overflow: hidden su un contenitore

StackOverflow https://stackoverflow.com/questions/2243245

  •  19-09-2019
  •  | 
  •  

Domanda

Ho 3 livelli di div:

  • (In verde qui sotto) A div livello superiore con overflow: hidden. Questo è perché voglio alcuni contenuti (non mostrato qui) all'interno di quella scatola per ritagliata se supera la dimensione della casella.
  • (in rosso sotto) All'interno di questo, ho div con position: relative. L'unico uso per questo è per il livello successivo.
  • (in blu sotto) Finalmente un div tiro fuori del flusso con position: absolute ma che voglio relativa posizionato a div rosso (non alla pagina).

Vorrei avere la scatola blu essere tolto dal flusso ed espandere oltre la casella verde, ma essere posizionato rispetto alla scatola rossa come in:

Tuttavia, con il codice qui sotto, ottengo:

E la rimozione della position: relative sulla scatola rossa, ora la scatola blu è permesso di uscire dalla scatola verde, ma non è posizionato più rispetto alla scatola rossa:

C'è un modo per:

  • Tenere il overflow: hidden sulla scatola verde.
  • Avere la scatola blu espandersi al di là della scatola verde ed essere posizionato rispetto a scatola rossa?

La sorgente completo: 

#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>

È stato utile?

Soluzione

Un trucco che funziona è quello di posizionare scatola # 2 con position: absolute invece di position: relative. Noi di solito messo un position: relative su una scatola esterna (qui box # 2) quando si vuole una scatola interna (qui box # 3) con position: absolute da posizionare relativamente alla scatola esterna. Ma ricordate: per la scatola # 3 di essere posizionato rispetto alla casella # 2, # 2 box solo bisogno di essere posizionato. Con questa modifica, otteniamo:

E qui è il codice completo con questo cambiamento: 

<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>

Ho aggiunto maggiori informazioni su questo su box posizionati in modo assoluto all'interno di una scatola con troppopieno "noreferrer":. automatica o nascosto

Altri suggerimenti

Non c'è una soluzione magica di mostrare qualcosa al di fuori di un contenitore nascosto di overflow.

Un effetto simile può essere ottenuto da avere un div posizionato assoluto che corrisponda alle dimensioni del suo genitore, posizionandolo all'interno del contenitore relativa corrente (il div che non si desidera a clip dovrebbe essere fuori dal div): 

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

Prendere presente che se avete solo per tagliare il contenuto sull'asse x (che sembra essere il vostro caso, come hai solo impostare la larghezza del div), è possibile utilizzare overflow-x: hidden.

Io in realtà non vedo un modo per fare questo così com'è. Penso che potrebbe essere necessario rimuovere la overflow:hidden dal div # 1 e aggiungere un altro div all'interno di div # 1 (cioè come un fratello a div # 2) per tenere il vostro 'contenuto' non specificata e aggiungere il overflow:hidden a che, invece. Non credo che il troppo pieno può essere (o dovrebbe essere in grado di essere) oltre-cavalcato.

Se non c'è altro contenuto non viene mostrato all'interno del esterno-div (riquadro verde), perché non ha che il contenuto avvolto all'interno di un altro div, chiamiamolo "content". Hanno troppo pieno nascosto su questo nuovo interno-div, ma mantenere troppopieno visibile sulla scatola verde.

L'unico problema è che si dovrà poi per fare un giro per assicurarsi che il contenuto div non interferisce con il posizionamento del box rosso, ma suona come si dovrebbe essere in grado di riparare quello con poco 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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top