如何解决在CSS中的框位置，而不考虑屏幕分辨率？

Question

对于头我把：<link href="styles.css" rel="stylesheet" type="text/css"></link> 我已经在身体给出的脚本是：

<input name="search" type="text" onKeyUp="getScriptPage('box','text_content')" id="text_content" AUTOCOMPLETE="off" size="40"> 

在CSS中我已经给ID脚本是：

#box 
{ 
    width : 270px; 
    height : auto; 
    overflow : auto ; 
    border : 1px solid #C5C5C5; 
    background : #F8F8F8; 
    position : absolute; 
    left : 460px; 
    top : 286px; 
    border-top : none; 
    text-align : left; 
    display : none; 
} 

的问题是，当我将屏幕分辨率从1366x768更改为更高......盒子的位置发生了变化......我只是想修复盒子的位置，而不考虑屏幕分辨率

Answer 1

也许您应该使用position:fixed而不是position:absolute？

http://davidwalsh.name/css-fixed-position

Answer 2

我推荐使用百分比，而不是像素值，则：

#box 
{ 
    width : 270px; 
    height : auto; 
    overflow : auto ; 
    border : 1px solid #C5C5C5; 
    background : #F8F8F8; 
    position : absolute; 
    left : 33%; 
    top : 33%; 
    border-top : none; 
    text-align : left; 
    display : none; 
} 

这里的百分比只是一个例子 - 你需要确定在哪里把它相对于你想要的布局通过摆弄百分比值。以下是一个以百分比值定位的框的示例：http://jsfiddle.net/RjgHy/