Overflowing on top of table rows instead of under

Question

I've got a situation where a div is overflowing out of a td. The problem is that it is somehow flowing underneath the content that is below it, which makes everything illegible. I tried using z-index to no avail. See my jsFiddle demo here.

td.big { 
    overflow-y:visible;
}
div.clipper { 
    max-height: 5em; 
    overflow-y: hidden;
}
div.clipper:hover {
    overflow-y: visible;
}
tr:hover,
div.clipper:hover .backing {
    background: lightblue;
    z-index: 1;
}

table, tr, td { 
    z-index: 0;
}

I'm aware that technically td shouldn't have overflow at all. My real goal here is to prevent the content of certain cells from getting larger than a certain height, and then displaying that content on hover. Is there a CSS only solution to this, or am I going to have to do the whole $.clone() thing?

Answer 1

Add max-height: inherit; to .clipper:hover.

div.clipper:hover {
    overflow-y: visible;
    max-height: inherit;
}