ansaurus

Question

Answer 1

A:

The z-index property applies to those elements having position set to absolute. Try this css instead:

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

Sarfraz 2009-12-23 12:15:35

Thanx Sharfraz, but still the bubble is hidden..overflow{ width:120px; height:80px; overflow:hidden; float:left; position:relative; }.coda_bubble{ position:absolute; z-index:100;/****NOT WORKING*******/ }

mukamaivan 2009-12-23 13:39:53

remove the .overflow class from element to check what happens.

Sarfraz 2009-12-24 05:28:24

That really works but it has a purpose, so i need it there.

mukamaivan 2009-12-26 06:37:29

Answer 2

+1 A:

I assume you don't need .coda_bubble to be a child of .overflow. If not then move it out and create a positioning div to hold both children.

<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"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/jquery-ui.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://www.myjquery.co.uk/jslib/jquery_plugins/coda_bubble/jquery.codabubble.js"&gt;&lt;/script&gt;
<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>

Byran 2010-01-06 03:11:21

Thanx Byran, the idea is great, let me try it that.

mukamaivan 2010-01-13 13:25:07

Answer 3

+1 A:

You can't. overflow: hidden; Hides content outside the element. Period.

z-index applies to absolute AND relatively positioned elements, just differently, despite what someone else said.

EDIT You could put some padding-top on that particular div, if you can live with that padding, that is. The div would need to be a little wider, too.

George Sisco 2010-01-12 18:17:47

ansaurus

tags:

views:

answers:

override overflow:hidden with z-index

related questions