IE 11滚动条浮动到首要问题

Question

我想问一下IE滚动条的处理方式。

容器是固定尺寸，里面的物品比容器长。对于IE，需要AUTOHIDE滚动条。

此外，覆盖层将浮在容器上。

html如下所示：

        .container {
            width: 300px;
            height: 300px;
            overflow: hidden;
            overflow-y: auto;
            -ms-overflow-style: -ms-autohiding-scrollbar;
            border: 1px solid black;
        }
        
        .container .item {
            border: 1px solid lightgrey;
            line-height: 50px;
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 150px;
            width: 300px;
            height: 300px;
            background-color: red;
        }

 <div class='container'>
        <div class='item'>Item 1</div>
        <div class='item'>Item 2</div>
        <div class='item'>Item 3</div>
        <div class='item'>Item 4</div>
        <div class='item'>Item 5</div>
        <div class='item'>Item 6</div>
        <div class='item'>Item 7</div>
        <div class='item'>Item 8</div>
        <div class='item'>Item 9</div>
        <div class='item'>Item 10</div>
        <div class='item'>Item 11</div>
        <div class='item'>Item 12</div>
        <div class='item'>Item 13</div>
        <div class='item'>Item 14</div>
        <div class='item'>Item 15</div>
        <div class='item'>Item 16</div>
        <div class='item'>Item 17</div>
        <div class='item'>Item 18</div>
        <div class='item'>Item 19</div>
        <div class='item'>Item 20</div>
    </div>
    <div class='overlay'></div>

自动隐藏效果很好，但是当我将鼠标悬停在列表上时，滚动条似乎忽略了z-index并始终浮动在顶部。

我可以知道有什么解决方案来控制此问题吗？还是减少浮动时间？我期望的最佳行为与Chrome相同。

谢谢！

Answer 1

z-index仅适用于position:relative/absolute;

   container {
    position:relative; //or absolute
    z-index:0
}