Question

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

Answer 1

我会从窗口计算偏移位置，将其从父项中移除并将其附加到正文中。

例如：

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

Answer 2

你做不到。溢出：隐藏;隐藏元素之外的内容。周期。

z-index适用于绝对AND相对定位的元素，不同之处，尽管别人说过。

修改的你可以在那个特定的div上添加一些padding-top，如果你可以使用那个填充，那就是。 div也需要更宽一些。

编辑2 正如其他人所说，虽然职位：相对;和位置：绝对;可能更常见，是的，z-index适用于position：fixed;还有，不适合职位：静态;我忽视了那些。

Answer 3

只需更正：z-index适用于position: relative，position:absolute和position:fixed。要回答原始问题 - CSS中没有办法让overflow: hidden元素的子元素显示它在父边框之外的内容，您必须更改层次结构。

Answer 4

我假设您不需要.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>

Answer 5

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

换句话说，总是需要positon才能使用z-index。

Answer 6

z-index属性适用于位置设置为绝对的元素。请尝试使用此css：

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

覆盖溢出：用z-index隐藏

6 个答案: