css - 溢出在表格行的顶部而不是下面

Question

我遇到了一种情况，其中 adiv溢出了 a td。问题是它以某种方式在其下方的内容下方流动，这使得所有内容都难以辨认。我尝试使用z-index无济于事。在这里查看我的jsFiddle 演示。

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

我知道从技术上讲td根本不应该overflow。我的真正目标是防止某些单元格的内容大于某个高度，然后在悬停时显示该内容。是否有唯一的 CSS 解决方案，或者我将不得不做整个$.clone()事情？

Answer 1

添加max-height: inherit;到 .clipper:hover。

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

Answer 2

z-index 默认情况下不起作用。它仅适用于相对、绝对或固定定位的元素。当您添加position: relative到指定 z-index 的 css 部分时，它可以工作。