jquery选择处理位置绝对的重叠问题

Question

我有一个固定的容器，我在其中显示一些表单元素，还有一个选择了jquery的样式化的select元素。问题是我需要显示在容器上方选择的下拉区域，为此我需要设置.chosen-container {position: absolute}但是在将固定区域滚动后将其设置为绝对时，所选择的区域保留在固定位置。如何解决？

css代码：

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

html代码：

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