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

你要图片精确的 friend 在哪里？