overflow solo un elemento in un DIV

Question

C'è un modo, CSS o JavaScript per consentire l'overflow di un elemento in un DIV, anche se il suo overflow dei genitori è nascosto.

Ho scritto un cursore jQuery che nasconde le diapositive usando overflow: hidden.

<div class="container"> 
    <img src="image.jpg" /> 
    <div class="text"> 
     THIS TEXT IS HIDDEN WHEN POSITIONED OUTSIDE OF .container 
    </div> 
</div> 

Il CSS:

.container{ 
    overflow:hidden; 
    position: relative; 
    width: 500px; height: 250px; 
} 

ho bisogno l'immagine a traboccare naturalmente però.

Answer 1

È necessario rimuovere position: relative;. Se lo metti sullo stesso elemento di overflow: hidden;, nasconderà l'elemento. Se proprio ne hai bisogno, prova a posizionarlo sul genitore di .container (più in alto nell'albero rispetto all'elemento che ha overflow: hidden).

jsFiddle Demo
Explanatory article

#wrap { position: relative; } 
 

 
.container{ 
 
    overflow:hidden; 
 
    width: 300px; height: 200px; 
 
    padding: 10px; 
 
    background-color: cyan; 
 
} 
 

 
.text { 
 
    position: absolute; 
 
    top: 280px; left: 0; 
 
    border: 1px solid red; 
 
}

<div id="wrap"> 
 
    <div class="container"> 
 
    Container 
 
    <div class="text">Not hidden anymore when positioned outside of .container</div> 
 
    </div> 
 
</div>

Answer 2

jQuery Esempio

$('.text').each(function(){ 
    var t = $(this);     // text div 
    var c = t.closest('.container'); // container parent 
    var i = c.children('img:first'); // container image 
    t.width(c.width());    // set text width = to container width 
    c.width(i.width());    // set container width = to text width 
}); 

Nota:

1. Ciò non influisce su padding/margini/bordi, ma è la logica di base che è possibile utilizzare.
2. Impostare la larghezza del testo uguale alla larghezza del contenitore dà solo l'aspetto che l'overflow viene applicato (si potrebbe anche solo impostare la larghezza del testo-div a 500px)

Answer 3

con dichiarazione di z-index in css puoi usare la posizione assoluta per farlo.

.container{ 
    z-index:900; 
    overflow:hidden; 
    width: 500px; 
    height: 250px; 
} 

.container img{ 
    z-index:920; 
    position:absolute; 
} 

è possibile impostare il margine per l'immagine se la sua posizione non è vera;