通过将两个图像放在彼此的CSS上，在行尾的意外间距

Question

我试图用css将照片放在另一张照片上。这很好。但我遇到的问题是我的段落第一行末尾有意外的间距。我不知道如何解决这个问题。 我希望有人可以帮助我。 http://jsfiddle.net/76j8W/1/

我的HTML看起来像这样：

<img id="firstpic" src="http://images7.alphacoders.com/407/407975.jpg" />
<img id="duck" src="http://clipartist.info/openclipart.org/2011/Sept/Sep2011_Art/rubber_duck-1331px.png " />
<p> sometext </p>

我的css看起来像这样：

#firstpic{
width:100%;
padding:0;
margin:auto;
}


#duck{
 width:45px;
 position: relative;
 z-index:999;
 top:-50px;
 float:right;
}

p{
text-align:justify; 
}

Answer 1

而不是

top: -50px

使用

margin-top: -50px;

示例小提琴：http://jsfiddle.net/yMv9L/

margin-top设置元素与其他元素的距离，因此该属性也会影响周围的元素（在给定的示例中为段落）。当您更改relative位置中元素的位置并使用top移动它时，它将从其原始位置“翻译”，但仍可从其他元素中看到该元素留下的空间（好像它处于静止位置）

---

结果效果