请问下，为什么jquery添加div后，后面的div总显示在前面，如图，让添加到显示到最前面该怎么做呢，z-index好像不行，
而且加了后下面的input无法编辑，请帮看看多谢啦
HTML
<html>
<head>
<title>面面面面</title>
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="drop.js" ></script>
<style>
.dropBox_div{
border:2px solid blue;
width:400px;
height:200px;
background:white; /*没有这个就透明了*/
position:absolute;
left:10%;
top:0;
}
</style>
</head>
<body>
<div class='inputdiv' id='div1' style="position:relative;">
<input id='d1' ></input>
</div>
<div class='inputdiv' id='div2' style="border:1px solid red;position:relative;">
<input id='d2' ></input>
</div>
<div class='inputdiv' id='div3' style="position:relative;">
<input id='d3' ></input>
</div>
</body>
</html>
js
$(document).ready(
function(){
$(".inputdiv").mousedown( function(){
var thisID = $(this).attr("id");
var dropBox_ID = "box_"+ thisID;
var $dropBox_div = $("<div/>");
$dropBox_div.attr("id",dropBox_ID).attr("class","dropBox_div");
$("#"+thisID).after($dropBox_div);
});
}
);
