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

选择正在为您流出，因为fixed position

您将需要一个包装盒，其中包含 aposition 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;
}

Answer 2

我相信这很可能是您的width: 100%on thetable和 your text-align: righton your的组合td。我怀疑你td的行为不是你想要的，也没有保持它width: 230px，而是随着屏幕宽度和table. 随着元素也随之移动text-align: right。select最简单的解决方法是将它定位select为text-align: left，除非您希望它是正确的并且要遵循背景（在这种情况下，您需要更正背景的附加方式）。

Answer 3

试试这个代码

<div class="header">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <td style="padding: 16px 10px 0px 52px; text-align: right; width: 230px; background: none repeat scroll 0% 0% whitesmoke; position: relative;">
                       <select style="border: 2px solid rgb(182, 109, 49); height: 35px; background: none repeat scroll 0% 0% yellow; opacity: 1; position: absolute; width: 150px; left: 0px;" type="text" name="dept" id="dept"><option></option>                                    
</select></td>
                        <td style="width: 2px;" rowspan="2">&nbsp;</td>

                    </tr>

            </tbody></table>
         </div>