15

我正在使用 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>
4

6 回答 6

24

我会计算窗口的偏移位置，将其从其父级中移除并将其附加到主体上。

例如：

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'
  });
于 2011-04-07T14:08:46.820 回答
19

你不能。溢出：隐藏；隐藏元素外的内容。时期。

z-index 适用于绝对和相对定位的元素，只是不同，尽管其他人说了什么。

编辑 您可以在该特定 div 上放置一些 padding-top，如果您可以使用该填充，那就是。div 也需要更宽一些。

编辑 2 正如其他人所说，虽然 position: relative; 和位置：绝对；可能更常见，是的，z-index 适用于 position: fixed; 另外，只是不适合 position: static; 我忽略了那些。

于 2010-01-12T18:17:47.397 回答
7

只是一个更正：z-index适用于position: relative, position:absoluteAND position:fixed。要回答最初的问题 - CSS 中无法让元素的子overflow: hidden元素在父边界之外显示其内容，您必须更改层次结构。

于 2011-05-24T15:25:28.500 回答
3

我假设您不需要 .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>
于 2010-01-06T03:11:21.647 回答
0

该z-index属性仅position适用于选项设置为absoluteor的元素relative。

换句话说，您总是需要positon使用z-index.

于 2011-02-08T18:39:51.933 回答
-1

z-index 属性适用于那些位置设置为绝对的元素。试试这个css：

.coda_bubble{
  position:absolute;
  z-index:100;/****NOT WORKING*******/
}
于 2009-12-23T12:15:35.490 回答