override overflow: caché avec z-index

Suis coda_bubble jquery plugin, et je dois faire ma bulle pop dans un div caché overflow. voici mon exemple de code.override overflow: caché avec 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>

Source

2009-12-23 mukamaivan

Je suppose que vous n'avez pas besoin .coda_bubble d'être un enfant de .overflow. Si ce n'est pas le cas, déplacez-le et créez un div de positionnement pour les deux enfants.

<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>

Source

2010-01-06 03:11:21 Byran

Thanx Byran, l'idée est géniale, laissez-moi essayer ça. – mukamaivan

La propriété z-index s'applique aux éléments dont la position est définie sur absolute. Essayez cette place css:

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

Source

2009-12-23 12:15:35 Sarfraz

Thanx Sharfraz, mais toujours la bulle est cachée. .overflow { largeur: 120px; hauteur: 80px; dépassement: masqué; flotteur: gauche; \t position: relative; } .coda_bubble { position: absolue; z-index: 100;/**** NOT WORKING *******/ } – mukamaivan

Supprimez la classe .overflow de l'élément pour vérifier ce qui se passe. – Sarfraz

Cela fonctionne vraiment mais il a un but, donc j'ai besoin là-bas. – mukamaivan

Vous ne pouvez pas. dépassement: masqué; Masque le contenu en dehors de l'élément. Période. Z-index s'applique aux éléments absolus ET relativement positionnés, tout simplement différemment, malgré ce que quelqu'un d'autre a dit.

EDIT Vous pouvez mettre un padding-top sur ce div particulier, si vous pouvez vivre avec ce rembourrage, c'est-à-dire. La div devrait aussi être un peu plus large.

EDIT 2 Comme d'autres l'ont indiqué, bien que la position: relative; et position: absolue; sont probablement plus communs, oui, z-index fonctionne avec la position: fixe; aussi, juste pas pour la position: statique; J'ai oublié ceux-là.

Source

2010-01-12 18:17:47

La propriété z-indexSEULEMENT travail dans les éléments qui ont l'option position réglé sur absolute ou relative.

En d'autres termes vous TOUJOURS besoin positon pour fonctionner avec z-index.

Source

2011-02-08 18:39:51 Username

Je calculerais la position de décalage de la fenêtre, la retirerais de son parent et l'attacherais au corps.

Par exemple:

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

Source

2011-04-07 14:08:46

Une correction: z-index applique à position: relative, position:absolute ET position:fixed. Pour répondre à la question originale - CSS ne permet pas de faire d'un enfant un élément overflow: hidden montrer qu'il s'agit d'un contenu en dehors des frontières parentales, vous devez changer la hierarchie.

Source

2011-05-24 15:25:28 mystrdat

Ce serait tellement mieux s'il était possible que les enfants écrasent certains de ses paramètres, juste pour eux-mêmes. Ensuite, certains des enfants d'un div caché par débordement pourraient être visibles (comme des nuances d'éléments à l'intérieur), mais le reste resterait tel quel. Cette restriction force littéralement les développeurs à transformer leur solution en un hack. –

La hiérarchie du HTML et du CSS force nombre de ces antipatterns, il faut beaucoup d'expérience pour faire des mises en page compliquées de manière optimale. – mystrdat

Répondre

Questions connexes