无论屏幕分辨率如何，都要修复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

，所以选择正在流出

您需要一个包装盒周围的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;
}

Answer 2

我认为这可能是width: 100%上的table和text-align: right上的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>