CODEWITHSUNDEEP
htmlcssinternet-explorerscrollbar
user2504831
user2504831

Reputation: 157

IE 11 Scrollbar float to top issue

I would like to ask about the handling of IE scrollbar.

The container is fix size and the items inside are longer than the container. For IE, AUTOHIDE scrollbar is needed.

Also, an overlay will float on the container.

The html is shown below:

        .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>

The autohide is worked fine, but it seems the scrollbar ignore the z-index and always float on the top when i mouseover to the list.

enter image description here

May i know is there any solution to control the issue? Or reduce the floating time? The best behaviour i expected it is the same as Chrome.

Thanks all!

Upvotes: 2

Views: 957

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16261

z-index work only with position:relative/absolute; 

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

Upvotes: 1

Related Questions