jquery chosen handling overlapping issue with position absolute

问题

I have a fixed container in which I am showing some form elements and also a select element stylized with jquery chosen. The problem is I need to show the drop-down area of chosen above the container, for this I need to set .chosen-container {position: absolute} but after setting it to absolute when the fixed area is scrolled the chosen remained at fixed location. How to fix it?

css code:

#fixed {
    border: 1px solid #000;
    width: 300px;
    height: 180px;
    overflow: auto;
}
.chosen-container {
    position: absolute;
}
.txt {
    display: block;
    margin: 10px 0;
}

html code:

<div id="fixed">
    <input class="txt" type="text" value="" />
    <input class="txt" type="text" value="" />
    <input class="txt" type="text" value="" />
<select class="chos" style="width: 165px">
    <option value="1">Val 1</option>
    <option value="2">Val 2</option>
    <option value="3">Val 3</option>
    <option value="4">Val 4</option>
    <option value="5">Val 5</option>
    <option value="6">Val 6</option>
    <option value="7">Val 7</option>
</select>
    <input type="text" class="txt" value="" />
    <input type="text" class="txt" value="" />
    <input type="text" class="txt" value="" />
    <input type="text" class="txt" value="" />
</div>

来源：https://stackoverflow.com/questions/19218702/jquery-chosen-handling-overlapping-issue-with-position-absolute