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>

需要帮助将“磁带”img定位到另一个img上

3 个答案: