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

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的位置和维度。

我还建议在phone内部创建另一个包装器元素，作为相对定位的元素，因为您的h4可以换到第二行，向下驱动电话图像，并使其与绝对定位不同步。

编辑：链接到JSFiddle.注意相对定位的包装器(.phone-wrap)。带有position: absolute的子元素将根据此包装器定义它们的位置。此外，不需要#phone_view的利润率。

同时，re：#phone_view，background-color只是为了使它在演示中可见，虽然overflow: auto看起来适合演示，但它并不影响对象本身的位置。