HTML5 + CSS在文本/填充上方叠加图像

Question

我正在尝试在文本填充的顶部重叠图像，如您在此处看到的那样：我想将图像当前位于背面的位置翻转过来，以使其位于文本顶部

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

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

以下是相关代码的摘要：

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

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