HTML5 + CSS在文本/填充之上重叠图像

Question

我正在尝试重叠文本填充顶部的图像，如下所示： 我想将图像当前放在后面的位置，以获得文本的顶部

http://puu.sh/gz2AW/883a840919.png

图像位于顶部。 如您所见，文本填充与其后面的图像重叠。

以下是相关代码的Jfiddle：

http://jsfiddle.net/ymc3bruz/2/

<div>  
    <img id="khufuimg" src="images/khufu.png" alt="Mountain View" style="width:150px;height:150px">
    <p id="secondPageParagraph"> The Great pyramids of Giza are some of the most famous<br> man-made objects in the world. The Great Pyramid <br> of Khufu is the only
wonder of the ancient world that<br> still survives to this day.<br> <br>
    <br>It is 756 feet long on each side, 450 feet high and is <br>composed of 2.3 Million blocks of stones, each averaging<br> 2 1/2 tons in weight.  <br>
    </p>
</div>

---

#khufuimg{
position:absolute;
margin-left:600px;
margin-top:100px;  }


#secondPageParagraph{
position:absolute;
margin-left:160px;
margin-top:100px;
padding-right:189px;
font-family:courier new;
background-color:white;
}

Answer 1

#khufuimg{
position:absolute;
margin-left:400px;
margin-top:0px;
z-index:10;
}

你想要图片精确的朋友在哪里？