override overflow: hidden with z-index

Estoy usando coda_bubble jquery plugin, y tengo que hacer que mi burbuja salga dentro de un div oculto de desbordamiento. aquí está mi código de muestra.override overflow: hidden with z-index

<html> 
<head> 
<title>Override overflow:hidden</title> 
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    opts = { 
     distances : [40,40], 
     leftShifts : [0,0], 
     bubbleTimes : [400,400], 
     hideDelays : [0,0], 
     bubbleWidths : [200,200], 
     bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER", 
     msieFix : true 
    }; 
    $('.coda_bubble').codaBubble(opts); 
}); 
</script> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
    } 
#wrapper{ 
    width:300px; 
    margin:200px auto; 
    } 
.overflow{ 
    width:120px; 
    height:80px; 
    overflow:hidden; 
    float:left; 
    } 
.coda_bubble{ 
    z-index:100;/****NOT WORKING*******/ 
    } 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div class="overflow"> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
    <div class="overflow" style="overflow: visible;"> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Fuente

2009-12-23 mukamaivan

Asumo que no es necesario .coda_bubble a ser un hijo de .overflow. De lo contrario, aléjalo y cree un div de posicionamiento para contener a ambos niños.

<html> 
<head> 
<title>Override overflow:hidden</title> 
<link href="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/bubble.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    opts = { 
     distances : [40,40], 
     leftShifts : [0,0], 
     bubbleTimes : [400,400], 
     hideDelays : [0,0], 
     bubbleWidths : [200,200], 
     bubbleImagesPath : "YOUR RELATIVE PATH TO SKIN FOLDER", 
     msieFix : true 
    }; 
    $('.coda_bubble').codaBubble(opts); 
}); 
</script> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
    } 
#wrapper{ 
    width:300px; 
    margin:200px auto; 
    } 
.overflow{ 
    overflow:hidden; 
    width:120px; 
    height:80px; 
    position:absolute; /*May not be needed.*/ 
    } 
.position { 
    width:120px; 
    height:80px; 
    float:left; 
} 
.coda_bubble{ 
    /*z-index:100;/****NOT WORKING*******/ 
    } 
</style> 
</head> 

<body> 
<div id="wrapper"> 
    <div class="position"> 
     <div class="overflow"> 
      [overflow content] 
     </div> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 

    <div class="position"> 
     <div class="overflow" style="overflow:"> 
      [overflow content] 
     </div> 
     <div class="coda_bubble"> 
      <div> 
       <p class="trigger">Trigger Bubble</p> 
      </div> 
      <div class="bubble_html"> 
       [BUBBLE CONTENT] 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Fuente

2010-01-06 03:11:21 Byran

Gracias, Byran, la idea es genial, déjame intentarlo. – mukamaivan

La propiedad z-index se aplica a aquellos elementos que tienen una posición establecida en absolute. Prueba este lugar css:

.coda_bubble{ 
    position:absolute; 
    z-index:100;/****NOT WORKING*******/ 
}

Fuente

2009-12-23 12:15:35 Sarfraz

Gracias Sharfraz, pero aún así la burbuja está oculta. .overflow { ancho: 120px; altura: 80px; desbordamiento: oculto; flotador: izquierda; \t posición: relativo; } .coda_bubble { posición: absoluta; z-index: 100;/**** NO FUNCIONA *******/ } – mukamaivan

elimina la clase .overflow del elemento para verificar lo que sucede. – Sarfraz

Eso realmente funciona pero tiene un propósito, entonces lo necesito allí. – mukamaivan

No puede. desbordamiento: oculto; Oculta el contenido fuera del elemento. Período.

z-index se aplica a elementos absolutos Y relativamente posicionados, solo de manera diferente, a pesar de lo que haya dicho otra persona.

EDITAR Se puede poner un poco de relleno en la parte superior que div en particular, si se puede vivir con ese relleno, es decir. El div también necesitaría ser un poco más ancho.

EDIT 2 Como otros han indicado, aunque la posición: relativa; y posición: absoluta; son probablemente más comunes, sí, el índice z funciona con la posición: fijo; también, simplemente no para la posición: estático; Los pasé por alto.

Fuente

2010-01-12 18:17:47

El z-index propiedad SOLO trabajo en elementos que han position opción establece en absolute o relative.

En otras palabras, SIEMPRE necesita positon para trabajar con z-index.

Fuente

2011-02-08 18:39:51 Username

Calcularía la posición de desplazamiento desde la ventana, la quitaría de su matriz y la fijaría al cuerpo.

Ej:

var left, top; 
left = jQuery(element).offset().left; 
top = jQuery(element).offset().top; 
jQuery(element) 
    .appendTo('body') 
    .css({ 
    'position': 'absolute', 
    'left': left + 'px', 
    'top': top + 'px' 
    });

Fuente

2011-04-07 14:08:46

Sólo una corrección: z-index se aplica a position: relative, position:absolute Y position:fixed. Para responder a la pregunta original: no hay forma en que CSS haga que un elemento secundario de un elemento overflow: hidden muestre su contenido fuera de los bordes principales, debe cambiar la jerarquía.

Fuente

2011-05-24 15:25:28 mystrdat

Sería mucho mejor si fuera posible que los niños sobrescribieran algunos de sus ajustes forfathers, solo para ellos mismos. Entonces algunos de los hijos de un div oculto por desbordamiento podrían ser visibles (como sombras de elementos dentro de él), pero el resto permanecería como está. Esta restricción literalmente fuerza a los desarrolladores a convertir su solución en un hack. –

La jerarquía de HTML y CSS obliga a muchos de estos antipatrones, se necesita una gran experiencia para realizar diseños complicados de una manera óptima. – mystrdat

override overflow: hidden with z-index

Respuesta

Cuestiones relacionadas