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

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