HTML5 + CSS 在文本/填充顶部重叠图像答案

【问题标题】：HTML5 + CSS Overlapping an image on top of Text/PaddingHTML5 + CSS 在文本/填充顶部重叠图像
【发布时间】：2015-03-14 08:00:02
【问题描述】：

我正在尝试在文本填充顶部重叠图像，如您在此处看到的：我想把它转到图像当前在后面的位置，以到达文本的顶部

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

【问题讨论】：

您是否尝试过使用显示块并设置更高的 z-index 值？
还要编辑 jFiddle，因为图片无法看到，因为来源是本地图片，您需要将其上传到某个地方，以便互联网上的人看到它:)
我不确定你想告诉我什么，我还在学习这门语言。
jsfiddle.net/ymc3bruz/1
但在小提琴中，图像甚至不在视口中

标签： css html image text overlap

【解决方案1】：

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

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

【讨论】：