使用CSS（或jQuery）放大图像，而无需移动页面上的所有其他内容

Question

我有一组动态生成的图像（每个图像附近都有一个注释）。我想显示每个图像的最大宽度和最大高度为48像素，但是当用户将鼠标悬停在图像上时，它会增长为最大宽度和最大高度为200像素。但不要移动页面上的其他所有内容。这是生成图像的代码：

$(function(){
        $.getJSON("inc/API.php", 
        {command : "getUserComments", userid : getQueryStringValue("userid")},
        function(result)
        {
        for (var i = 0; i<6; i++){
            $("#divUserCommentsContent").append("<div id='divUserComment'><div id='divCommentTime'>"+
            result[i].commentDateAndTime+"</div><div id='divUserDetail'><div id='divUserpic'>
       **<img src='images/"+result[i].imageFileName+"' class='commentpic' />**</div>
            <div id='divUsername'>Comment for <a href='rank.html?imageID="+result[i].imageID+
            "&imageFileName="+result[i].imageFileName+"'>"+result[i].imageHeader+
            "</a></div></div><div id='divCommentText'>"+result[i].comment+"</div></div>");
        }
    });
});

我用2 **标记了图像。这是CSS：

.userpic, .commentpic
{
max-height:48px;
max-width:48px;
border-radius:5px;
z-index:1;
position:relative;
}
.commentpic:hover
{
max-width: 200px;
max-height: 200px;
position:relative;
z-index: 50;
}

它会放大图像，但也会在图像的右侧和图像下方移动其他所有内容。

如何使用CSS（最好是CSS）或jQuery放大图像，而又不移动其他所有内容？谢谢！

Answer 1

您可以尝试将 .commentpic 的位置设置为绝对位置。

您可以在此处查看示例： http: //jsfiddle.net/HkPCp/3/

我想这就是你想要的行为，对吗？

编辑：我更新了 jsFiddle，这样它就不会移动其他元素。

这是正确的行为吗？