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

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>

这是我得到的结果：

这是我想要的结果。注意：我不希望任何东西移动，我只想在悬停时将图像显示在文本上方，因此我不需要任何东西移动到其他地方。

- ILikebanana

---

在样式中添加 z-index:1000000;。 - Pranav C Balan

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

这将处理高度不同的图像。

- Josh Harrison

---

看看我对David Aguirre的回复，你发了同样的答案。 - ILikebanana

试一下，看看效果。它不是同样的答案。它可以处理高度可变的图像。 - Josh Harrison

你救了我一命，兄弟！ - ILikebanana

Answer 2

给容器"wrap"设置"relative"定位， 然后将图像以"absolute"相对定位，再使用负数的"top"属性。

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

- David Aguirre

---

这样做可以，但是如果图像的高度非常大，那么 top: -50px 将无用。就像我说的，图像没有定义高度。 - ILikebanana

你不应该让图片超过特定的高度。使用“max-height”来限制图片的高度，以确保它们不会超过一定的高度。 - David Aguirre

如果我将max-height设置为100px，而图像的高度只有40px，则图像将远离文本。因此，正确的解决方案是使用垂直居中来确保图像始终与文本对齐。 - ILikebanana

添加了一些 jQuery 代码，应该能够解决这个问题。虽然还没有测试过，但是它应该可以正常工作。 - David Aguirre