Html 图像以一定宽度重叠

我试图在一个设置为一定宽度的区域内，将几个图像叠加在另一个图像的顶部。我的问题是，当这些图像的组合宽度超过该区域的宽度时，一些图像被放置在下面的行上。我试图通过使用

left:-100px

来解决这个问题，以使图像彼此重叠并减小整个组合图像的宽度，但同样的问题仍然存在

我知道解决方案可以是

boxC{top:-100px；}

，但这意味着在窗口中会生成额外的100px。为了验证这一点，您可以最小化浏览器的垂直高度，您将看到存在一个不可见的间隙

我的问题是，我如何能够在一定宽度内将多个图像重叠在另一个图像上，而不将任何图像放置在下面的行上

我目前拥有的：

我想要的：（注意，为了实现这一点，我必须设置

#wrapper{width:600px}

。我想通过将它保留为

#wrapper{width:500px}

来实现这个外观，就像前面的JSFIDLE一样

HTML:

---

而不是像这样使用左边和上面的边距

<style>
#wrapper { border:black 5px solid; width:500px; height:400px; margin:0 auto;}
#wrapper div { float:left;position:relative;}
#boxA {width:200px; height:100px; background:rgba(150,20,0,0.6); margin:0 0 0 0}
#boxB {width:200px; height:100px; background:rgba(150,40,100,0.6); margin:50px 0 0 -50px;}
#boxC {width:200px; height:100px; background:rgba(150,60,200,0.6); margin:100px 0 0 -50px;}  ​
</style>
<div id="wrapper">
    <div id="boxA" class="box"></div>
    <div id="boxB" class="box"></div>
    <div id="boxC" class="box"></div>
</div>​

#包装{边框：黑色5px实心；宽度：500px；高度：400px；边距：0自动；}
#包装器div{float:left；position:relative；}
#boxA{宽度：200px；高度：100px；背景：rgba（150,20,0,0.6）；边距：0}
#boxB{宽度：200px；高度：100px；背景：rgba（150,40100,0.6）；边距：50px0-50px；}
#boxC{宽度：200px；高度：100px；背景：rgba（150,60200,0.6）；边距：100px 0-50px；}​
​

谢谢。这正是我几天来一直在寻找的：）

#wrapper { border:black 5px solid; width:500px; height:100px; margin:0 auto;}
.box { float:left; position:relative; top:0;}
#boxA {width:200px; height:100px; background:rgba(250,100,100,0.6); left:0px; }
#boxB {width:200px; height:100px; background:rgba(150,140,200,0.6); left:-50px;}
#boxC {width:200px; height:100px; background:rgba(100,250,250,0.6); left:-100px; top:-100px;}

<style>
#wrapper { border:black 5px solid; width:500px; height:400px; margin:0 auto;}
#wrapper div { float:left;position:relative;}
#boxA {width:200px; height:100px; background:rgba(150,20,0,0.6); margin:0 0 0 0}
#boxB {width:200px; height:100px; background:rgba(150,40,100,0.6); margin:50px 0 0 -50px;}
#boxC {width:200px; height:100px; background:rgba(150,60,200,0.6); margin:100px 0 0 -50px;}  ​
</style>
<div id="wrapper">
    <div id="boxA" class="box"></div>
    <div id="boxB" class="box"></div>
    <div id="boxC" class="box"></div>
</div>​