Override Overflow:Hidden with Z-Index

override overflow:hidden with z-index

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"></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>

Overriding overflow: hidden

Answer is: You can't. Either the parent has overflow:hidden then all child-elements will be clipped, or you have overflow:(visible|auto|scroll|...) then all children are treated according to that rule. There is no possibility you could mix states - all children are treated equally.

However, you could introduce additional container-elements inside the parent (which no longer has overflow:hidden) like in this pseudo-code:

<parent>    
   <container1 style="overflow:hidden">
      <!-- these will be clipped -->
      <element>
      <element>
   </container>

   <container2 style="overflow:visible">
      <!-- these will be shown -->
      <element>
      <element> 
   </container>
</parent>

edit: example

Why is overflow interacting with z-index?

The reason the cyan box appears only when overflow-x and overflow-y are visible, and disappears otherwise, is simply because the cyan box is overflowing the cell box. overflow: visible simply means "paint this box even if it is overflowing its containing block" — the cell box is the containing block of the cyan box because its position is relative. Any other values of overflow cause overflowing content to be clipped from view. There is nothing special going on here; in particular, the z-index is completely irrelevant and there is no such interaction as the question title alludes to (and there really is no reason to set it to such a huge number unless you're worried about scripts injecting other elements into the cell).

The only way to allow the cyan box to appear while the cell has a non-visible overflow is to remove position: relative from the cell and apply that declaration to the parent of the cell (in your example, it's the body). Like this:

body {

  position: relative;

}

.boxy {

  position: absolute;

  z-index: 9999;

  top: 70px;

  width: 50px;

  height: 50px;

  background: #0FF;

}

.cell {

  border: 2px solid #F00;

  overflow: auto;

}

<div class="cell">

  Here is some text to keep things interesting

  <div class="boxy"></div>

</div>

How to ignore parent element's overflow:hidden in css

Method 1

A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:

.parent {
   position: relative;      
   .fixed-wrapper {
       position: absolute;         
       .fixed {
           position: fixed;
       }
   }
}

One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.

Method 2

Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:

http://jsfiddle.net/kv0bLpw8/

How can i use z-index with overflow:hidden?

I would do a box and have one for the content like this, that also means keep the button in that box as well.

.box {
  position: relative;
}

.box__content {
  overflow-y: hidden;
  max-height: 16rem;
}

.btn {
  position: absolute;
  bottom: -1em;
  z-index: 999;
  left: 50%;
}

<div class="box">
  <div class="box__content">
    blandit nullam nascetur vitae ipsum quis non parturient, id ullamcorper quam maximus scelerisque facilisis amet tincidunt. Nec curabitur elit vehicula magna dolor convallis, commodo fusce accumsan phasellus vestibulum senectus, efficitur elementum netus
    luctus pellentesque. Leo hendrerit rutrum ac facilisi nullam sapien consectetur, proin amet lobortis ultricies primis nec torquent dis, orci nisi class ridiculus lacinia dui. Euismod suspendisse ad maximus ut nibh urna ante nascetur tellus, penatibus
    fermentum eleifend faucibus scelerisque nisi fames ornare eget curae, nec eu ex ultricies potenti bibendum pellentesque mattis. Magnis lorem curabitur neque urna rhoncus sit, turpis varius facilisi nascetur elit cursus maximus, justo phasellus eros
    posuere netus.
  </div>
  <button class="btn">Show more</button>
</div>

Hovered element to overflow out from an overflow:hidden element css

Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden declaration on the parent div. See: Allow specific tag to override overflow:hidden

Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden.

Override Overflow:Hidden with Z-Index