将一个图像放在另一个图像上，但在调整浏

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属性的重点是它允许元素相互缠绕。我认为你无法实现你想要使用浮动的东西。