调整浏览器窗口大小时，图像顶部的 HTML 按钮不会保持固定

Question

我学会了如何将 html 表单元素放在图像之上。现在我希望在调整窗口大小时保留该按钮。

请看这里:

http://derbuttle.com/test/easing.html

PS:我知道这个问题很老套。

Answer 1

这个问题并不平庸。这可能看起来微不足道，但如果人们不经常这样做，就会一直绊倒他们。我想这取决于您如何将表格放置在图像之上。

• 您是否将图像作为表单的背景？
• 您使用的是 css 绝对定位还是相对定位？
• 您是否使用 javascript/jquery 来定位元素。

你正在做的事情的一个重要方面是要意识到，通过将元素放在另一个元素之上，你将需要确保它已从文档流中删除，通常通过使用CSS 中的 position:absolute; 或 position:relative; 规则。执行此操作后，该元素将相对于包含它的最低非静态定位元素进行绝对或相对定位。如果您运行我包含的代码片段，您会发现您可以点击红色 div 内的任意位置，所有元素都会移动到您点击的位置，但保持彼此之间的关系。

我希望这能回答您的问题。

var add = 20;
var leftCt = $("div#left_ct");
var cnt = $('div#container');
var bkg = $('div#background_relative');

cnt.on("click", function(e) {
  var left = e.pageX - cnt.position().left - 10;
  var top = e.pageY - cnt.position().top - 30;
  bkg.css({
    left: left,
    top: top
  });
  leftCt.html(left);
})

div#container {
  padding:10px;
  position: relative;
  background-color: salmon;
  width: 600px;
  height: 600px;
}
div#background_relative {
  display: block;
  margin: 10px;
  background-color: lightgreen;
  position: relative;
  width: 300px;
  height: 300px;
}
div#background_relative>* {
  left: 0;
  background-color: lightblue;
  position: absolute;
}
img {
  top: 20px;
}
form#form_over_image {
  background-color: yellow;
  z-index: 1;
  left: 10%;
  top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='left_ct'></div>
<div id='container'>
  Container has position:relative
  <div id='background_relative'>
    Background has position:relative
    <img src='' alt='image has position:absolute' width=200 height=200 />
    <form id='form_over_image'>
      <div>form has position: absolute</div>
      <input type='text' value='' />
    </form>
  </div>
</div>