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>