CSS位置固定在顶部，水平和垂直滚动条

Question

我有以下带有 fiddel 链接的代码：jsfiddlel

HTML：

<div id="scroller">
    <div id="container">
        <div id="fixed">
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
        </div>
    </div>
</div>

CSS：

#scroller {
    position: relative;
    height: 400px;
    width: 400px;
    overflow: auto;
    border: 1px solid;
    background-color: #EEE;
}

#container {
    height: 800px;
}

#fixed {
    position: absolute;
    height: 100px;
    background-color: #FF0000;
    top: 0;
    left: 0;
    width: 600px;
    display: block;
}

我想让我的 id 为“#fixed”的 div 标签固定在带有垂直和水平滚动条的“#scroller”div 的顶部。我能够获得两个滚动条，但无法将“#fixed”div 粘贴到“#scroller”div 的顶部。

“固定”内的内容应该可以用“#scroller”的水平滚动条滚动。

请帮帮我。提前致谢。

Answer 1

把你的代码改成这个

*{box-sizing: border-box}

#scroller {
    position: relative;
    height: 400px;
    width: 400px;
    border: 1px solid;
    background-color: #EEE;
}
section{
    position: absolute;
    top:170px;
    left:0;
    bottom: 0;
    width: 100%;
    overflow-y: auto
}
#container {
    height: 800px;
    position: relative;
}

#fixed {
    position: absolute;
    background-color: #FF0000;
    top: 0;
    left: 0;
    padding: 20px;
    width: 100%;
    height: 170px
}

<div id="scroller">
    <section>
        <div id="container"></div>
    </section>
    <div id="fixed">
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test 
     </div>
</div>    

JSFIDDLE 上的结果相同