CODEWITHSUNDEEP
cssoverflowcellz-indexcss-tables
brentonstrine
brentonstrine

Reputation: 22752

Overflowing on top of table rows instead of under

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?

Upvotes: 0

Views: 81

Answers (2)

Neograph734
Neograph734

Reputation: 1754

z-index does not work by default. It only works on relative, absolute or fixed positioned elements. When you add position: relative to the css sections where you specift a z-index it works.

Upvotes: 0

glkz
glkz

Reputation: 101

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

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

Upvotes: 1

Related Questions