Question

在Firefox 25.0.1和Firefix 26 for Mac（在Mavericks上），我遇到了很多问题，Firefox显示了div的子元素后面的滚动条，带有overflow-y：scroll; （或自动）他们。我创建了一个简单的JS小提琴，显示了这种行为（下面的代码）： http://jsfiddle.net/barts/6y4ce/

如果你开始滚动，＃toolbar div将与滚动条重叠，滚动条上有一个z-index：20。如果我取出z-index，滚动条将正确显示在工具栏上。但是如果我离开z-index并在#container div上设置一个，那么如果我将它设为更高或更低的数字并不重要，滚动条总是在工具栏下面。

我错过了一些简单的东西吗？在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>

Answer 1

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

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

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

Example (JSFiddle)

Answer 2

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

Firefox for Mac显示子元素后面的滚动条

2 个答案: