如何在內容上方放置圖像

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