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/

如何在css中修复盒子位置而不考虑屏幕分辨率？

2 个答案: