當我將一個元素放在另一個元素上時，我是否正確使用絕對定位？

Question

我正在爲我想創建的應用程序構建演示，並且正在嘗試在手機上創建按鈕。我帶來了一個手機的圖像，並創建了按鈕設置爲絕對定位，允許我通過手機進行分層，但是當我去調整頁面大小時，元素移動很多，並且不會保留在手機中的相同位置。我怎樣才能解決這個問題？請看小提琴，看看究竟是什麼意思：http://jsfiddle.net/x313vkup/

我真的很感激修改我的小提琴鏈接，所以我可以理解這是如何工作的。 這是代碼的片段，顯示列表中設置爲絕對定位：

#phone_view { 
position: absolute; 
margin-top: -65%; 
margin-left: 15%; 
} 

Answer 1

的position:absolute妙處在於，你可以完成很多沒有設置頁邊距 - 你可以直接去使用top，left，等等。

然而，一個絕對定位的元素需要相對於一個包裝來定位。我建議將您的#phone元素設置爲position: relative，然後在CSS中手動設置#phone_view的位置和尺寸。

我還建議在手機內部創建另一個包裝元素，以充當相對定位的元素，因爲您的h4可以包裝到第二行，壓低手機圖像，並使其與絕對定位不同步。

編輯：link to JSFiddle。請注意相對位置的包裝（.phone-wrap）。 position: absolute的子元素將根據此包裝器定義其位置。此外，#phone_view上不需要邊距。

此外，re：#phone_view,background-color只是爲了讓它在演示中可見，而overflow: auto似乎適合演示，它不會影響對象本身的位置。