Cách định vị hình ảnh phía trên nội dung

Question

Tôi đang cố định vị trí hình ảnh ở trên (KHÔNG phải trước đó) văn bản. Dưới đây là mã tôi có cho đến nay. Tôi cũng đã đăng kết quả tôi nhận được và kết quả tôi muốn đạt được. Mục tiêu của tôi là, khi người dùng di chuột qua <p> Tôi muốn hiển thị hình ảnh ở trên, điều này có nghĩa là tôi cần phải sử dụng vị trí tuyệt đối vì tôi không muốn bất cứ thứ gì được dịch chuyển ở bất kỳ nơi nào khác, tôi chỉ muốn hiển thị hình ảnh phía trên văn bản.

LƯU Ý: Hình ảnh không có chiều cao xác định, có thể dài hơn hoặc ngắn hơn.

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

Đây là kết quả tôi nhận được,

Đây là kết quả mong muốn của tôi. Lưu ý: Tôi không muốn bất cứ điều gì để được chuyển, tôi chỉ muốn hiển thị hình ảnh phía trên văn bản khi nó được di chuột do đó tôi không cần bất cứ điều gì để được chuyển bất cứ nơi nào.

Answer 1

dụ làm việc: 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; 
} 

này sẽ xử lý hình ảnh có chiều cao khác nhau.

Answer 2

Cho container "bọc" một vị trí của "tương đối" Sau đó, định vị hình ảnh như bây giờ bạn đang ở với "tuyệt đối", sau đó sử dụng "hàng đầu" tiêu cực

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

heres css

#wrap { 
    position: relative; 
} 

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

nếu bạn không biết chiều cao của hình ảnh thì hãy sử dụng Jquery. Không được kiểm tra.

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