suis en utilisant Coda_Bubble JQuery Plugin, et je dois faire sortir ma bulle dans un débordement caché div. Voici mon code d'exemple.
<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>
6 Réponses :
La propriété Z-Index s'applique à ces éléments ayant une position définie sur absolue. Essayez ce CSS à la place:
.coda_bubble{
position:absolute;
z-index:100;/****NOT WORKING*******/
}
Merci Sharfraz, mais toujours la bulle est cachée. .Overflow {largeur: 120px; Hauteur: 80px; débordement caché; flotteur: gauche; Position: relatif; } .Coda_bubble {Position: Absolute; z-index: 100; / **** ne fonctionne pas ******* /}
Retirez la classe .Overflow de l'élément pour vérifier ce qui se passe.
Juste une note: Z-Index nécessite tout positionnement autre que statique.
Je suppose que vous n'avez pas besoin de .Coda_bubble pour être un enfant de .overflow. Sinon, puis-le sortir et créer un positionnement DIV pour contenir 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>
Thanx Byran, l'idée est excellente, laissez-moi essayer cela.
Vous ne pouvez pas. débordement caché; Cache le contenu en dehors de l'élément. Période.
z-index s'applique aux éléments absolus et relativement positionnés, juste différemment, malgré ce que quelqu'un d'autre a dit.
éditer
Vous pouvez mettre un peu de rembourrage sur ce montant en particulier, si vous pouvez vivre avec ce rembourrage, c'est-à-dire. La div aurait besoin d'être un peu plus large aussi.
éditer 2
Comme d'autres ont déclaré, bien que position: relatif; et position: absolu; sont probablement plus courants, oui, z-index fonctionne avec position: fixe; En outre, juste pas pour la position: statique; J'ai négligé ceux-là.
the En d'autres termes, vous z-index Propriété position option définie sur absolu ou relative .
POSITON Pour fonctionner avec Z-Index .
Je calculerais la position de décalage de la fenêtre, retirez-la de son parent et joignez-la au corps.
par exemple:
juste une correction: z-index s'applique à Position: relative , Position: absolu et Position: fixe .
Pour répondre à la question originale - la CSS n'a aucun moyen de faire un enfant d'un dépassement : Élément masquage caché SUPPORT EST SOMMAINE SUR LES BORDERS DE PARENTS, vous devez changer la hiérarchie.
Ce serait tellement mieux s'il était possible de remplacer les enfants qui remplacent certains de ses paramètres de forfers, juste pour eux-mêmes. Ensuite, certains des enfants d'une div des débordements dissimulés peuvent être visibles (tels que des nuances d'éléments à l'intérieur), mais le reste resterait tel quel. Cette restriction oblige littéralement les développeurs à transformer leur solution en hack.
La hiérarchie de HTML et CSS oblige beaucoup de ces antiparatères, il faut beaucoup d'expérience en fonctionnalités compliquées de manière optimale.