需要幫助定位「磁帶」img在另一個img

Question

我試圖把img放在另一個img上，因爲我想要一個剪貼簿的效果，圖像被「錄製」到主頁中。

我想保持磁帶層的一致性並釋放自己以更改下面的圖像而不會丟失位置。

HTML：

<div id="container"> 
    <div id="content"> 
     <img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" /> 
     <img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" /> 

     <div class="text"> 
      <h2>Rain Hands</h2> 
      <p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p> 
     </div> 
    </div> 
</div> 

CSS：

.gesture { 
margin-left: 0; 
margin-top: 45px; 
width: 350px; 
float: left; } 

.tape { 
margin-left: 10px; 
margin-top: 45px; 
position: absolute; 
float: left; 
width: 350px; 
z-index: 1;} 

我得到的是：

http://oi50.tinypic.com/28s8x8j.jpg

但我想的磁帶上的邊角頂部圖片。

Answer 1

就拿膠帶DIV container之外：

<img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" /> 
<div id="container"> 
    <div id="content"> 
     <img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" /> 


     <div class="text"> 
      <h2>Rain Hands</h2> 
      <p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p> 
     </div> 
    </div> 
</div> 

的jsfiddle：http://jsfiddle.net/hescano/bb5JC/

Answer 2

嘗試#content {position: relative;}，並卸下.tape浮動。

Answer 3

我會做到這一點的方式是通過製作一個包裝div（class =「image」）來放置照片和磁帶圖形。然後將磁帶圖像包裹在另一個absolutley定位的div中。現在，您可以使用top：left：來定位磁帶圖形，使其與之匹配。在您的示例中，磁帶太高而不適合您的示例圖像。如果你將有不同的圖像大小，這可能是聰明的，使兩個磁帶圖像，一個頂部和一個底部，並使用頂部位置他們，右：底：左：

<style> 
.image{ 
position:relative; 
} 

.gesture { 
margin-left: 0; 
margin-top: 45px; 
width: 350px; 
float: left; } 

.tape { 
left: 10px; 
top: 45px; 
position: absolute; 
float: left; 
width: 350px; 
z-index: 1;} 
</style> 


<div class="image"> 
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" /> 
<div class="tape"><img src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" /></div> 
</div>