html - IE 11 滚动条 float 到顶部问题

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
}