Przepełnienie tylko jednego elementu w DIV

Question

Czy istnieje sposób, CSS lub JavaScript, aby umożliwić przepełnienie jednego elementu w DIV, nawet jeśli jego nadmiar rodziców jest ukryty.

Pisałem suwak jQuery, która ukrywa slajdy za pomocą overflow: hidden.

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

CSS:

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

muszę obraz do przepełnienia choć naturalnie.

Answer 1

Należy usunąć position: relative;. Jeśli umieścisz go na tym samym elemencie co overflow: hidden;, ukryje on ten element. Jeśli naprawdę tego potrzebujesz, spróbuj umieścić go na rodzica .container (wyżej w drzewie niż element mający 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 Przykład

$('.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 
}); 

Uwaga:

1. nie ma wypełniaczy/marginesów/granice do afektu, ale to podstawowa logika można użyć.
2. Ustawianie szerokości tekstu równą szerokości kontenera daje to tylko wrażenie, że przelew jest stosowana (można też po prostu ustawić szerokość tekstu DIV do 500px)

Answer 3

z uznającej z-index w css możesz użyć absolutnej pozycji, aby to zrobić.

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

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

można ustawić margines dla obrazu, jeśli jego pozycja nie jest prawdziwa;