Question

我正在制作一个带有背景图像的div。在那个div中我想在某些特定位置添加文本框。现在每当我调整窗口大小时，文本框的位置都会受到干扰。以下是我正在做的事情的屏幕截图http://prntscr.com/8j4eel 无论分辨率或屏幕尺寸如何，我都希望文本框和图像能够固定。

＆＃13;

#diagram {
  background: url("map.png") no-repeat center;
  width: inherit;
  height: 200px;
}
#diagram input[type="text"] {
  background-color: yellow;
  width: 60px;
}
#left {
  margin-top: 10%;
  margin-left: 20%;
}
#right {
  margin-top: 12%;
  margin-left: 45%;
}
#bottom {
  margin-left: 39%;
}

＆＃13;

<div id="diagram">
  <input type="text" id="left" />
  <input type="text" id="bottom" />
  <br/>
  <input type="text" id="right" />
</div>

＆＃13;

Answer 1

很简单，就是：

position: fixed;

Answer 2

您必须修复容纳所有元素的容器的大小。请尝试以下代码。我已将$method = 'query/JobOrder?BhRestToken='.$_SESSION['BH']['restToken'].'&where=publishedCategory = "IT"'&fields='.$fields.'&count='.$count; $response = makeHttpRequest($_SESSION['BH']['restURL'], $method);添加到width:900px。

#diagram

#diagram {
  background: url("map.png") no-repeat center;
  width: inherit;
  height: 200px;
  width:900px;
}
#diagram input[type="text"] {
  background-color: yellow;
  width: 60px;
}
#left {
  margin-top: 10%;
  margin-left: 20%;
}
#right {
  margin-top: 12%;
  margin-left: 45%;
}
#bottom {
  margin-left: 39%;
}

如何使div及其内容得到修复？

2 个答案: