html - 无论屏幕分辨率如何，都固定 div 位置

Question

这是我的页眉，它有一个选择菜单并且必须很好地定位在背景图像的顶部，当屏幕分辨率发生变化时如何将其固定到位？

看看

这里有一个更大的分辨率

html 如下所示:

    <div class="header">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                    <tr>
                        <td style="padding: 16px 10px 0 52px ;text-align: right; width: 230px; background: url('images/searchbar_dropdown.png') no-repeat scroll 72px 15px transparent;">
                       <select id="dept" name="dept" type="text" style="background-color: white; border: 2px solid rgb(182, 109, 49); width: 150px; height: 35px; opacity: 0;"><option></option>                                    
</select></div></td>
                        <td rowspan="2" style="width: 2px;">&nbsp;</td>

                    </tr>

            </table>
         </div>

和标题 CSS

 .header {
background: url("../../images/background.png") repeat;
position: fixed;
color: white;
min-height: 65px;
padding: 5px 5px;
margin: 0;
}    

Answer 1

因为固定位置

所以select给你流出来了

您将需要一个包装盒，该包装盒具有 position relative 和 position absolute

示例:

<div id="boxWrapper">
    <select class="selectbox">
        <option value="">option 1</option>
        <option value="">option 2</option>
        <option value="">option 3</option>
    </select>
</div>

#boxWrapper {
    position: relative:
}

.selectbox {
    position: absolute;
    top: 0px; 
    left: 0px;
}