如何将图像定位在内容之上

Question

我试图将图像放在文本上方(而不是之前).下面是我到目前为止的代码.我还发布了我得到的结果和我想要实现的结果.我的目标是,当用户悬停<p>我希望在其上方显示图像时,这意味着我需要使用绝对位置,因为我不希望任何东西被移动到其他地方,我只想在文本上方显示图像.

注意:图像没有定义高度,可能更长或更短.

 <div id="wrap" style="position:relative; height: 100px; width: 500px; background: red">
        <img src="img/cat.png" style="position:absolute; ">
        <p style="position:absolute; ">Some text here..</p>
</div>

这是我得到的结果,

这是我渴望的结果.注意:我不想要任何东西被移动,我只想在文本悬停后显示文本,因此我不需要任何东西可以移动到任何地方.

Answer 1

工作示例： http: //jsfiddle.net/Rhcp5/2/

HTML：

<div id="wrap">
        <img src="img/cat.png">
        <p>Some text here..</p>
</div>

CSS：

#wrap {
position:relative; 
height: 100px; 
width: 500px; 
background: red;
}

#wrap img {
display: none;
position: absolute;
bottom: 100%;
margin-bottom: 5px;
}

#wrap:hover img {
display: block;
}

这将处理可变高度的图像。