设置div相对位置

先看一下效果，就是上面是个只有下边框的input输入框！要做的是下面选择日期的DIV始终在input文本框正下方。

html代码：

<input name="txt_tqys" id="txt_tqys" class="myline" style="width:260px;" readonly="readonly" type="text" onmouseover="xzrq()" onmouseout="lkxzrq()">

<div class="jnNav" style="display: none;" onmouseover="xzrq()" onmouseout="lkxzrq()"></div>

具体DIV内容省略不写了

CSS样式:

.jnNav {
background: #FFFFFF;
border: 1px solid #B1B1B1;
overflow: hidden;
position: absolute;
width: 260px;
z-index: 1000;
display: none;
}div标签的CSS样式

.myline {
border-style: none;
border-bottom: #000000 1px solid;
background-color: white;
text-align: center;
}

input标签CSS样式

JS代码：

function xzrq(){
var X = $('#txt_tqys').position().left;
var Y = $('#txt_tqys').position().top;
$('.jnNav').css({ "left": X, "top": Y + 20 });
$(".jnNav").css("display", "block");
}

鼠标移入input计算input的X坐标Y坐标设置Div坐标然后将其展示出来
function lkxzrq(){
$(".jnNav").css("display", "none");
}

鼠标离开之后隐藏DIv

本人也是通过上网搜索没找到，之后问同事解决的！所以上传只是为了下次遇到同样的问题不走弯路，也为了大家遇到这样的问题可以更少的浪费时间！