正确显示层的位置

<a href="javascript:showDiv('areaDiv')">上海</a>
…………
<div id="areaDiv">浦东宝山<div>
……现在我单击上海要让那个层（areaDiv）在上海这个字下面显示那个位置怎么控制？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!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>
    <title>无标题页</title>
    <style>
#areaDiv{position:absolute;z-index:2;display:none;border:1px solid #ccc}
    </style>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script>
$(document).ready(function(){
    $("#province").hover(function(e){
e=e||window.event;
var x = e.pageX;
var y = e.pageY;
$("#areaDiv").css({"top":y,"left":x,"display":"block"})
    },function(){
$("#areaDiv").css("display","none");
    })
})
    </script>
</head>
<body>
<a id="province" style="cursor:pointer;">上海</a><div id="areaDiv">浦东宝山<div></body></html>
<!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>
    <title>无标题页</title>
    <style type="text/css">
        #areaDiv
        {
            position: absolute;
            z-index: 2;
            display: none;
            border: 1px solid #ccc;
        }
    </style>    <script type="text/javascript">
        window.onload = function() {
            var Province = document.getElementById("province");
            var AreaDiv = document.getElementById("areaDiv");
            var dt;
            Province.onclick = function(e) {
                var event = e || window.event;
                var x = event.clientX;
                var y = event.clientY;
                AreaDiv.style.top = (y + 15) + 'px';
                AreaDiv.style.left = (x - 30) + 'px';
                AreaDiv.style.display = "block";
            };
            Province.onmouseout = AreaDiv.onmouseout = function() {
                dt = setTimeout(function() {
                    AreaDiv.style.display = "none";
                }, 1000);
            };
            AreaDiv.onmouseover = function() {
                clearTimeout(dt);
            };
        };
    </script></head>
<body>
    <div style="position: absolute; top: 200px; left: 400px;">
        <a id="province" style="cursor: pointer;">上海</a>
    </div>
    <div id="areaDiv">
        浦东宝山</div>
</body>
</html>Try
获取控件的绝对位置
jquery:
$("#div1").css("top",$("#textbox1").offset().top+("#textbox1").outerHeight);
$("#div1").css("left",,$("#textbox1").offset().left);
jQ可以啊，但是如果只为了一两个功能而去引用jQ的话我觉得没有这个必要
最简单的办法  设置css的z-index    z-index的值越大  就越浮在最上面
Jquery 简单版：
$("#" + eDiv + "").css({ top: $("#" + eSp + "").position().top + 20, left: $("#" + eSp + "").position().left, display: "block" }); 一行搞定