Question

我试图在一定宽度的区域内将几个图像叠加在一起。我的问题是，当这些图像的组合宽度超过区域的宽度时，一些图像被放置在下面的线上。我试图通过使用left:-100px使图像相互重叠并减少整体组合图像的宽度来解决这个问题，但仍然会出现同样的问题。

我知道解决方案可能是boxC{top:-100px;}，但这意味着窗口中会生成额外的100px。作为对此的验证，您可以最小化浏览器的垂直高度，您将看到存在无形的间隙。 http://postimage.org/image/5s0o82f81/

我的问题是如何在一定宽度内将多张图像叠加在一起，而不会在下面的线条上放置任何图像。

我目前拥有的内容：http://jsfiddle.net/xFkh6/2/

我想要的是什么：http://jsfiddle.net/d9xh8/2/（请注意，要实现这一点，我必须设置#wrapper{width:600px}。我希望通过将其保留为#wrapper{width:500px}来实现此外观，就像之前的jsFiddle一样。

HTML：

<div id="wrapper">
    <div id="boxA" class="box"></div>
    <div id="boxB" class="box"></div>
    <div id="boxC" class="box"></div>
</div>

CSS：

#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;}

Answer 1

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

<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>

具有一定宽度的图像重叠

1 个答案: