将一个元素放在另一个元素上时，我是否正确使用绝对定位

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上不需要保证金。

另外，重新：#phone_view，background-color只是为了让它在演示中可见，虽然overflow: auto似乎适合演示，但它不会影响演示的定位对象本身。