【发布时间】：2018-08-13 03:21:50
【问题描述】：
我这里有示例页面：https://jsfiddle.net/solaris_9/17dwfmap/16/
.area-toc a {
position: absolute; /* Position them relative to the browser window */
left: -120px; /* Position them outside of the screen */
transition: 0.3s; /* Add transition on hover */
/*padding: 2px; *//* 15px padding */
width: 140px; /* Set a specific width */
text-decoration: none; /* Remove underline */
font-size: 15px; /* Increase font size */
color: white; /* White text color */
border-radius: 0 2px 2px 0; /* Rounded corners on the top right and bottom right side */
text-align: center;
background-color: #76a000;
z-index: 99;
}
.area-toc a:hover{
left: 0;
z-index: 99;
}
.table-main{
border-style:solid;
border-color:#aad69e;
border-width:1px 1px 1px;
z-index:9;
position:relative;
}
一般来说，当鼠标悬停在侧导航时，我希望链接可以呈现在表格的前面。我把它的z-index设置为99，而表是9，但它不起作用。
你有什么想法吗？它是否链接到表格的弹性显示？
【问题讨论】：
-
仅在真正需要时使用位置 ;) jsfiddle.net/17dwfmap/18 如果你必须这样做，那么请注意作为兄弟姐妹的定位父母从那里计算 z-index ：jsfiddle.net/17dwfmap/19 z-index 与：相对的，绝对的，固定的位置。 transform 也可以提高效率。
-
@G-Cyr，感谢您的解决方案。有用。但我不明白其中的逻辑。你能详细说明一下吗？对于此描述： 注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。由于 .table-title 和 .table-main 是相对的，z-index 应该可以工作。
-
你在 z-index:10 上设置了表格；但是，固定位置的 .area-toc 不会收到更高的值（默认为 1），内部的任何内容都将从该层级别计算。 . z-指数：99；给孩子们将是 99 在它的容器内，它位于 1 层......在桌子下面。否则，不要在不需要它的其他地方使用位置。所以你甚至不需要（重新）将 z-index 设置为 1（足够）
-
一个具有绝对、相对、固定和变换的示例，当身体悬停codepen.io/gc-nomade/pen/yqwXXo 时，具有不同的 z-index 值全部重置为自动，如果这有助于查看和理解它是如何工作的。
-
@G-Cyr，非常感谢您的解释！