Permita etiqueta específica para anular overflow: hidden

Question

Tengo un <div>, eso es cierto height y width, y overflow:hidden imágenes interiores de manera que se recortan specfic; sin embargo, quiero una imagen en el <div> para salir del borde (es decir, para anular el overflow:hidden), ¿cómo puedo hacer esto?

Answer 1

No puede, a menos que cambie su diseño HTML y mueva esa imagen fuera del div principal. Un poco más de contexto lo ayudaría a encontrar una solución aceptable.

Answer 2

desbordamiento se refiere al contenedor que no permite que se muestre contenido de gran tamaño (cuando se establece en oculto). No tiene nada que ver con los elementos internos que pueden tener desbordamiento: lo que sea, y aún no se mostrará.

Answer 3

índice Z no se parece a trabajar, pero aquí tengo una solución que funcionaba bien para mí, ya que necesitaba desbordamiento sólo para ser "visible" cuando se pasa un elemento secundario:

#parent { 
    overflow: hidden; 
} 

#parent:hover { 
    overflow: visible; 
} 

Answer 4

Sé que esto es una publicación anterior, pero esto se puede hacer (al menos en Chrome). Me di cuenta de esto hace dos años y me salvó un par de veces.

Establezca el niño para tener la posición de fijo y use los márgenes en lugar de la parte superior e izquierda para colocarlo.

#wrapper { 
    width: 5px; 
    height: 5px; 
    border: 1px solid #000; 
    overflow: hidden; 
} 

#parent { 
    position: relative; 
} 

button { 
    position: fixed; 
    margin: 10px 0px 0px 30px; 
} 

Aquí se muestra un ejemplo: http://jsfiddle.net/senica/Cupmb/

Answer 5

Puede desbordarse un elemento de la inmersión envolviéndolo en otro div, a continuación, establecer la imagen como position: absolute; y compensarlo usando márgenes.

<div class="no-overflow"> 
<div> 
<img class="escape" src="wherever.jpg" /> 
</div> 
</div> 

.no-overflow{ 
overflow:hidden; 
width: 500px 
height: 100px 
} 

.escape{ 
position: absolute; 
margin-bottom: -150px; 
} 

Ejemplo (probado en Firefox + IE10) http://jsfiddle.net/Ps76J/

Answer 6

Todas las respuestas dadas donde no satisfactorio para mí. Todos son hackish en mi opinión y difíciles de implementar en diseños complejos.

Así que aquí es una solución simple:

vez que un padre tiene un cierto desbordamiento, no hay manera de dejar que sus hijos tienen prioridad sobre esto.

Si un niño necesita anular el desbordamiento principal, un niño puede tener un desbordamiento diferente al de los otros niños.

Así definen el desbordamiento en cada niñoen lugar de declarar que en el padre:

<div class="panel"> 
    <div class="outer"> 
     <div class="inner" style="background-color: red;"> 
      <div> 
       title 
      </div> 

      <div>      
       some content 
      </div> 
     </div>  
    </div> 
</div> 

.outer { 
    position: relative; 
    overflow: hidden; 
}  

.outer:hover { 
    overflow: visible; 
} 

.inner:hover { 
    position: absolute; 
} 

Aquí es un violín:

http://jsfiddle.net/ryojeg1b/1/

Answer 7

El truco es mantener el elemento overflow:hidden w con position:static y coloque el elemento desbordado relativo a un elemento superior superior (en lugar del elemento primario overflow:hidden).De este modo:

.relative-wrap { 
 
    /*relative on second parent*/ 
 
    position: relative; 
 
} 
 

 
.overflow-wrap { 
 
    height: 250px; 
 
    width: 250px; 
 
    overflow: hidden; 
 
    background: lightblue; 
 
    
 
    /*no relative on immediate parent*/ 
 
} 
 

 
.respect-overflow { 
 
    position: relative; 
 
    top: 75px; 
 
    left: 225px; 
 
    height: 50px; 
 
    width: 50px; 
 
    background: green;  
 
} 
 
.no-overflow { 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 225px; 
 
    height: 50px; 
 
    width: 50px; 
 
    background: red; 
 
}

<div class="relative-wrap"> 
 
    
 
    <div class="overflow-wrap"> 
 
     
 
     <div class="respect-overflow"> 
 
     
 
     </div> 
 
     <div class="no-overflow"> 
 
      
 
     </div> 
 
     
 
    </div> 
 
    
 
</div>

también quiero señalar, un caso de uso muy común que el deseo de tener un desbordamiento elemento de su contenedor de esta manera es cuando se quiere animar a la altura de una lista desplegable o contenedor de X a 0, y por lo tanto necesita tener overflow: hidden en el contenedor. Normalmente tiene algo dentro de el contenedor que desea desbordar independientemente. Dado que estos elementos solo son accesibles cuando el contenedor está "abierto", puede aprovechar y establecer el desbordamiento de nuevo en visibledespués de el contenedor está completamente abierto, y luego establecerlo de nuevo en hidden antes de intentar animar el contenedor de nuevo a height: 0 .

Answer 8

Todo lo anterior es bueno, pero nada supera a JAVASCRIPT. (usando jquery). Así,

<script> 
var element = $('#myID'); 
var pos = element.offset(); 
var height = element.height(); // optional 
element.appendTo($('body')); // optional 
element.css({ 
    position : 'fixed' 
}).offset(pos).height(height); 
</script> 

Lo que hago es, obtener la posición original del elemento (en relación a la página), opcionalmente obtener la altura o anchura, opcionalmente añadir el elemento al cuerpo, se aplica la nueva regla css position : fixed y finalmente aplique la posición original y opcionalmente el ancho y alto.

Answer 9

Envuelva su overflow: hiddendiv con otro div que tiene una propiedad CSS de -

transform: translate(0, 0);

y en su etiqueta specefic que desea que se anula la - overflow: hidden, ajustado con -

position: fixed; continuará siendo la posición relativa a su padre

ie -

.section { 
    ... 
    transform: translate(0, 0); 
} 

.not-hidden { 
    position: fixed; 
    ... 
} 

See the fiddle here

Answer 10

Actualmente no existe una manera que soy consciente de hacer un nodo padre con rebosadero oculto tienen hijos visible fuera de ella (con la excepción de los niños position:fixed).

SIN EMBARGO, es posible usar el contorno en conjunto con el color del fondo combinado con la propiedad z-index para enmascarar algunos elementos mientras se conservan otros.

.persuado-overflow-hidden { 
 
/*gives the appearance of overflow:hidden*/ 
 
    z-index: -100; 
 
    position: relative; 
 
    outline: 1000vw solid white; 
 
    overflow: visible; 
 
} 
 
.overridevisible { 
 
/*takes the element out of the persuado overflow hidden*/ 
 
    z-index: 1; 
 
} 
 
/*does the other styling to the text*/ 
 
.loremcontainer { 
 
    width: 60vw; 
 
    height: 60vh; 
 
    margin: 20vw; 
 
    border: 1px solid; 
 
} 
 
.loremtxt { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    margin: -20vh; 
 
    z-index: -1; 
 
} 
 
.positionmessage { 
 
    z-index: 100; 
 
    position: absolute; 
 
    top: -12vh; 
 
    left: -5vw; 
 
    right: -5vw; 
 
    color: red; 
 
}

<div class="persuado-overflow-hidden loremcontainer"> 
 
<div class="loremtxt"> 
 
<div class="overridevisible positionmessage">Then, theres this text outside the paragraphs inside the persuado overflow:hidden element</div> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porta lorem lorem, eu dapibus libero laoreet et. Fusce finibus, felis ac condimentum commodo, mauris felis dictum sapien, pellentesque tincidunt dui dolor id nulla. Etiam vulputate turpis eu lectus ornare, in condimentum purus feugiat. Donec ultricies lacinia urna, sit amet ultrices magna accumsan ut. Suspendisse potenti. Maecenas nisl nibh, accumsan vel sodales in, rutrum at sem. Suspendisse elit urna, luctus vitae urna ut, convallis ultricies tellus. Ut aliquet auctor neque, nec ullamcorper tortor ullamcorper vitae. Fusce at pharetra ante. Aliquam sollicitudin id ante sit amet sagittis. Suspendisse id neque quis nisi mattis vulputate. Donec sollicitudin pharetra tempus. Integer congue leo mi, et fermentum massa malesuada nec. 
 
</div> 
 
</div>

Answer 11

Tengo una solución súper fácil a este problema: Utilice la etiqueta de "pre". Sé que la etiqueta previa es el equivalente a usar "goto" en la programación, pero hey: ¡funciona!

<div style="overflow: hidden;"> 
 
    <pre> 
 
    super long text which just goes on and on and on and on and one, etc. 
 
    </pre> 
 
</div>