如何解決在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/