desbordamiento de un solo elemento en un DIV

Question

¿Hay alguna manera, CSS o JavaScript para permitir el desbordamiento de un elemento en un DIV, incluso si el desbordamiento de sus padres está oculto?

He escrito un control deslizante jQuery que oculta las diapositivas usando overflow: hidden.

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

El CSS:

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

necesito la imagen a desbordarse, naturalmente, sin embargo.

Answer 1

Debe eliminar position: relative;. Si lo coloca en el mismo elemento que overflow: hidden;, ocultará el elemento. Si realmente lo necesita, intente colocarlo en el padre de .container (más alto en el árbol que el elemento que tiene 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 Ejemplo

$('.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. Esto no afecta a los rellenos/márgenes/bordes en el efecto, pero es la lógica básica que puede usar.
2. Ajuste de la anchura del texto igual a la anchura del contenedor sólo le da la apariencia de que se aplica el desbordamiento (también se puede simplemente establecer el ancho del texto div a 500 píxeles)

Answer 3

con declarar z-index en CSS, puede usar position absolute para hacer esto.

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

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

puede establecer el margen de la imagen si su posición no es verdadera;