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

Question

我已经学会了如何在图片上放置html表单元素。现在我想让按钮在调整窗口大小时保持不变。

请看这里：

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

PS：我知道这个问题是非常平庸。

Answer 1

这个问题并不平庸。这可能看起来微不足道，但如果他们没有做太多的事情，它总是会让人们翘首以待。我想这取决于你如何将图像放在图像上。

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

的你在做什么，是要认识到，通过将要素上的另一个你打算上到需要确保它已经从文档流取出的一个重要方面，通常使用 一个position:absolute;或position:relative;规则在您的CSS。一旦你这样做了，元素将相对于包含它的最低非静态元素进行绝对或相对定位。如果您运行我已包含的代码段，则会看到您可以单击红色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>

Answer 2

你的定位使用相对绝对定位到整个窗口，而不是它包含分区的按钮。由于您在示例中将图片用作背景/布局，因此几乎不可能实现您想要的操作。

查看详情：http://learnlayout.com/position.html