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

moskidogu 2009-11-22 01:23:18

<!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值，这又是什么原因？

哪位高人能解答下，不胜感激。

...全文