Question

我遇到div溢出td的情况。问题是，它以某种方式在下面下面的内容流动，这使得一切都难以辨认。我尝试使用z-index无济于事。请参阅我的 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;
}

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

Answer 1

将max-height: inherit;添加到.clipper：悬停。

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

Answer 2

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

在表行顶部而不是在下面溢出

2 个答案: