如何在内容上方放置图像

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

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

Answer 2

给容器“包装”一个“相对”的位置 然后使用“绝对”定位图像，然后使用负“顶部”

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

这是css

#wrap {
    position: relative;
}

#wrap img:hover {
    position: absolute;
    top: -50px;
    left: 0;
}

如果您不知道图像的高度，请使用 Jquery。未测试。

var imageHeight = $("#imgID").height();
$('#imgID').hover(function() {
    $('#imgID').css({
       'position': 'absolute',
       'top': '-' + imageHeight,
       'right': '0'
    }) 
});