How to position an image above the content

absolute, css, javascript, jquery, position

Solution

Working example: 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;
}

This will handle images of variable height.

Problem

I am trying to position an image above (NOT before) the text. Below is the code I have so far. I also posted the result I am getting and the one I want to achieve. My goal is, when the user hover the `<p>` I want to show an image above it, this mean I need to use absolute position because I do not want anything to be shifted anywhere else, I just want to show the image above the text. NOTE: The image has no define height, it could be longer or shorter. ``` <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> ``` This is the result I get, This is my desire result. Note: I DON't want anything to be shifted, I just want to show the image above the text once it is hovered therefore I do not need anything to be shifted anywhere.

Original source