瀏覽器窗口調整大小時，圖片頂部的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