CSS position fixed to top with horizontal and vertical scroll bar

Question

I have following code with fiddel link: 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;
}

I want to have my div tag with id "#fixed" to be fixed on top inside the "#scroller" div with vertical and horizontal scroll-bars. I am able to get both scroll-bars, but not able to stick the "#fixed" div to top inside "#scroller" div.

The content inside "fixed" should be scrollable with horizontal scroll bar of "#scroller".

Please helpme out. Thanks in advance.

Answer 1

Change your code to this

 *{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> 

The same result on JSFIDDLE