[ACCEPTED]-override overflow:hidden with z-index-z-index

Accepted answer

Score: 24

I would calculate the offset position from 2 the window, remove it from its parent and 1 attach it to the body.

Eg:

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

Score: 19

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

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

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

EDIT 2 As 4 others have stated, though position: relative; and 3 position: absolute; are probably more common, yes, z-index 2 works with position: fixed; also, just not 1 for position: static; I overlooked those.

Score: 7

Just a correction: z-index applies to position: relative, position:absolute AND position:fixed. To 4 answer the original question - there's no 3 way in CSS to make a child of an overflow: hidden element 2 show it's contents outside the parent borders, you 1 must change the hierarchy.

Score: 3

I assume you don't need .coda_bubble to 3 be a child of .overflow. If not then move 2 it out and create a positioning div to hold 1 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"></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>

Score: 0

The z-index property ONLY work in elements that have 2 position option set to absolute or relative.

In other words you ALWAYS need 1 positon to work with z-index.

Source: stackoverflow.com

[ACCEPTED]-override overflow:hidden with z-index-z-index

element with higher z-index value not overlaying another

All About.... Z-Index?

CSS: Box+text over image

Displaying elements other than fullscreen element (HTML5 fullscreen API)

Is it possible to have a child element behind his parent element with z-index

Can a image tag in html z-index behind a css background image?

z-index ignored in newsletter

z-index and opacity issues

Darken a background image without affecting the Text

Z-Index Not Working - Alternative Technique or Fix