无论屏幕分辨率如何，如何修复css中的框位置？答案

【问题标题】：How to fix box position in css irrespective to screen resolution?无论屏幕分辨率如何，如何修复css中的框位置？
【发布时间】：2014-11-21 12:03:43
【问题描述】：

对于我放置的标题：<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 更改为更高时...盒子的位置发生了变化...我只想修复盒子的位置而与屏幕分辨率无关

【问题讨论】：

你想在哪里“修复”它？你的 HTML 是什么样的？
你的输入元素外面有一个盒子来模拟在盒子里打字吗？？？？定位有问题吗？
顺便说一句，您的输入标签缺少尾部斜杠或结束标签。
它就像 google 的自动提示。当您输入内容时，弹出框会显示与您输入的内容相关的搜索查询。
@Aftad：我在任何地方都看不到您的扩展 html。只是向我们展示<input> 并没有帮助。

标签： html css positioning screen-resolution

【解决方案1】：

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

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

【讨论】：

【解决方案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/

【讨论】：

我这样做了，但框的位置显示在不同屏幕分辨率的其他位置