Question

我在此处有示例页面：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，但是它不起作用。

你有什么主意吗？它链接到表格的弹性显示吗？

Answer 1

使用z-index时，我经常也会遇到这个问题。我的解决方法是将我想降低的元素的z-index设置为负数。

https://jsfiddle.net/17dwfmap/27/

在第113行，我更改了

z-index:9;

到

 z-index:-10;

Z-index在悬停的侧面导航上无法按预期工作

1 个答案: