火狐浏览器在Mac上显示滚动条时被子元素遮挡

Question

在Firefox 25.0.1和Mac上的Firefix 26（在Mavericks上），我遇到了许多问题，Firefox显示滚动条会在带有overflow-y:scroll;（或auto）的div子元素后面。 我创建了一个简单的JS fiddle来展示这种行为（下面是代码）：http://jsfiddle.net/barts/6y4ce/ 如果你开始滚动，#toolbar div将覆盖滚动条，它具有z-index:20。 如果我去掉z-index，那么滚动条将正确地显示在工具栏上。 但是，如果我保留z-index并在#container div上设置一个z-index，则无论我使其更高或更低，滚动条始终会在工具栏下面。

我错过了一些简单的东西吗？ 在Safari和Chrome中，滚动条总是显示在最上面。

    <style type="text/css">

    * { 
        box-sizing:border-box; 
        -moz-box-sizing: border-box;
    }

    #container {
        width:500px;
        height:500px;
        background:#ccc;
        overflow-y:scroll;
    }

    #toolbar {
        background:#efefef;
        position:relative;
        z-index:20;
        width:100%;
        padding:20px;
        height:50px;
    }

    </style>


    <div id="container">

        <div id="header">

            <h1>Test</h1>

            <div id="toolbar">

            </div>
        </div>

        <div id="content">

            <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p>

            <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

            <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p>

            <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>


            <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p>

            <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>


            <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p>

            <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>


            <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p>

            <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

        </div>

    </div>

- Bart S.

---

Lorem Ipsum 发生了什么事？ - Cilan

@ManofSnow，我在Mac上使用一个叫做LittleIpsum的程序，可以让我生成不同的文本。 :) - Bart S.

Answer 1

有几种方法可以解决这个特定的问题；其中一种方法是像以前一样在container div中使用overflow-y property，尽管改为在content div中使用其他属性。在html中，您需要交换container和header div的位置，并将content div嵌套在container div中。

#container {
    width:500px;
    height:500px;
    background:#ccc;
    overflow-y:scroll;
}

#content {
    background:#ccc;
    z-index:1;
    position:relative;
}

样例（JSFiddle）

- l'L'l

---

嗨，谢谢您的回复。对于我正在使用的东西，将容器的宽度去掉并不实际。此外，如果我将#toolbar div的width:100％去掉，问题似乎仍然存在。请参阅此JSFiddle：http://jsfiddle.net/6y4ce/40/。 - Bart S.

@BartS.，你也可以将宽度和高度属性移回到容器中。重要的是在容器中设置overflow-y:scroll并嵌套divs - 看一下。 - l'L'l

在你的例子中，我只看到了我已经知道的overflow-y:scroll。而且它还存在一些问题...在Firefox中，内容区域现在重叠了滚动条，在其他浏览器中存在水平滚动条。 - Bart S.

Answer 2

将父元素（溢出的元素）设置为position: relative，并尽可能设置更高的z-index，只需尝试设置比子元素更多的值，例如z-index: 999999

- nikoloza