muk*_*van 12 html css z-index overflow
我正在使用coda_bubble jquery插件,我需要让我的气泡在溢出隐藏的div中弹出.这是我的示例代码.
<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>
Tom*_*ere 21
我将从窗口计算偏移位置,将其从父项中删除并将其附加到正文.
例如:
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'
});
Geo*_*sco 15
你不能.溢出:隐藏; 隐藏元素之外的内容.期.
z-index适用于绝对的AND相对定位的元素,不同之处,尽管别人说过.
编辑 你可以在特定的div上添加一些填充顶部,如果你可以使用那个填充,那就是.div也需要更宽一些.
编辑2 正如其他人所说,虽然职位:相对; 和位置:绝对; 可能更常见,是的,z-index适用于position:fixed; 还有,不适合职位:静态; 我忽略了那些.
只是一个修正:z-index适用于position: relative,position:absoluteAND position:fixed.要回答原始问题 - 在CSS中没有办法让overflow: hidden元素的子元素显示它在父边框之外的内容,您必须更改层次结构.
我假设您不需要 .coda_bubble 成为 .overflow 的子项。如果没有，则将其移出并创建一个定位 div 来容纳两个子级。
<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>