jquery制作弹出提示框的位置问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pop</title>
<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
<style>
img {
border:0;
}
.container {
width:400px;
margin:100px auto 0 auto;
}
.title {
height:30px;
line-height:30px;
width:400px;
position:relative;
border:1px solid #666;
}
.pics {
width:398px;
border-right:1px solid #666;
border-left:1px solid #666;
border-bottom:1px solid #666;
}
.titles {
margin:0 0 0 12px;
}
#popIcon {
margin:0 0 0 5px;
}
.popLayout1 {
display:none;
width:150px;
height:80px;
border:1px solid #999;
background:#CCC;
        z-index:100;
}
</style>
<script type="text/javascript">$(document).ready(function(){
var speed = 600;
$("#popIcon").click(function(event){
event.stopPropagation();
var offset = $(event.target).offset();
$("#popLayout").css({ top:offset.top + $(event.target).height() + "px", left:offset.left + "px" });//设置弹出层位置 $("#popLayout").show(speed);
});
$(document).click(function(event) { $("#popLayout").hide(speed) });
$("#popLayout").click(function(event) { $("#popLayout").hide(speed) });
});
</script>
</head>
<body>
<div class="container">
  <div class="title"><span class="titles">new chart</span><a href="#" id="popIcon"><img src="http://www.moskido.net/download/iconQuery.gif" width="12" height="12" alt="" /></a> </div>
  <div class="pics"><img width="398" height="198" src="http://www.moskido.net/download/pic1.jpg" /></div>
</div>
<div id="popLayout" class="popLayout1">text text text text text text text text text text text </div>
</body>
</html>代码如上。
点击小的问号icon弹出一个层，显示文字。代码是网上找的，单独使用没有发现问题，但是在套到实际页面内发现弹出层的位置跑掉了。请教下 这是什么原因造成的？
另外，调试中发现还有一种情况：弹出层在icon哪里打开后，会把下面的div挤下去，但是css中设置了z-index值，这又是什么原因？哪位高人能解答下，不胜感激。