Question

我正在尝试将<div>置于<td>标记内，但希望将div移到桌子后面。这在某种程度上不适用于普通的z-index。

我知道我可以用负z-index移动它，但这会导致它消失在我的身体，内容等之后。我也可以将它们的z索引更改为负值，但这会导致其他探测器。

有没有其他方法可以解决我想要做的事情？基本上我希望转换后的美元价格<div>从表格后面显示，并将鼠标悬停在<tr>上方。之前它不应该是可见的。

<table>
    <tbody>
        <tr>
            <td>London</td><td>Rome</td><td>300€<div>=330$</div></td>
        </tr>
        <tr>
            <td>Paris</td><td>Madrid</td><td>200€<div>=320$</div></td>
        </tr>
    </tbody>
</table

CSS

div {
    position: absolute;
    z-index: 100
}

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





/* Just some styling nvm */

table {
    background: lightblue;
}

td { position: relative; padding: 5px 15px; }

div {
    background: lightgrey;
    width: 40px;
    transition: all 0.2s;
    top: 5px;
    right: 0;
}
tr:hover div { 
    right: -40px;
}

Answer 1

您需要在父项的父项上设置z-index，在子项上设置负z-index以隐藏div。 http://jsfiddle.net/o4x6p4qd/

基本上这个：

div    ebx
add    ecx, 1      ;(a+b*c)/(d-e*f) + 1

Answer 2

在没有z-index的情况下，一个非常简单的方法是在光标悬停在字体上时更改字体的颜色。我尝试使用z-index来完成它并且它不起作用：（

将div放在table-z-index后面的tag中

2 个答案: