html - 将一张图片放在另一张图片上，但在调整浏览器宽度时两者一起移动

Question

我想要两张图片。一个在另一个之上。图像必须在其 div 容器内水平居中，并且如果调整浏览器窗口宽度，则位于另一个上方的图像与其下方的图像保持相同的相对位置。我尝试了很多事情，但都没有成功。我什至不能让任何一个图像水平居中。以下是基础知识：

http://jsfiddle.net/AndroidDev/gxpSX/

<div style="width:100%">
    <div style="float: left; position:absolute; margin:auto">
        <img src="http://www.majhost.com/gallery/shaucker/Requests/red_rectangle-489x328.png" />
    </div>
    <div style="float: left; position:absolute; z-index:3000">
        <img src="http://www.avforums.com/forums/attachments/gran-turismo-ps3/206363d1286966503-gt5-wallpapers-artwork-dial-up-beware-yellow_buttonpsd.jpg" />
    </div>
</div>

Answer 1

http://jsfiddle.net/thirtydot/gxpSX/2/

<div style="width:100%; text-align:center; position:relative;">
    <img src="http://www.majhost.com/gallery/shaucker/Requests/red_rectangle-489x328.png" />
    <div style="position:absolute; top:0; left:0; right:0">
        <img src="http://www.avforums.com/forums/attachments/gran-turismo-ps3/206363d1286966503-gt5-wallpapers-artwork-dial-up-beware-yellow_buttonpsd.jpg" />
    </div>
</div>

Answer 2

float 属性的全部意义在于它允许元素相互环绕。我认为您无法使用浮动实现您想要的目标。