请问下,为什么jquery添加div后,后面的div总显示在前面,多谢

请问下,为什么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);

        });
    }
);

 

 

 

 

sean_cnx
sean_cnx 图上用的是ie8~~测了下问题和浏览器相关,谢谢大家,分就给fen5251了
6 年多之前 回复

4个回答

换个浏览器看看,图上的应该是ie6吧,

不是很明白LZ的意思

不过这句css:
position:absolute;
删除试试。

surelei
surelei 把z-index设置成999,越大的数字越在前面。
6 年多之前 回复
sean_cnx
sean_cnx 谢谢,这句删掉div就会挤掉原来的div,我要的效果是新加div在最前面显示,就像看视频的时候设置为总在最前显示一样
6 年多之前 回复

[code="java"]
设置index可以的吧

可以让div显示在后面,而且上层的那个input是可以输入值的吧

.dropBox_div{
border:2px solid blue;
width:400px;
height:200px;
background:white; /*没有这个就透明了*/
position:absolute;
left:20%;
top:30;
z-index: -999;

}
[/code]

sean_cnx
sean_cnx 谢谢,但是加上还是不行
6 年多之前 回复

哥们 你的例子我测试了半天走不进方法 无意间我看到这样的写法 我就不想再测试啦 你先好好学习下jquery

id='d1' id='d2'

class='inputdiv'

iteye_11009
iteye_11009 你都不知道我说的什么意思 可能我接触jquery版本接触的太少啦 id='d2' 从来没有这样写过 id="d2";
6 年多之前 回复
sean_cnx
sean_cnx 请教下这有什么不妥吗,实际中不是这么命名的,这里为了方便说明才这样写,另外这里jquery用的是1.9,浏览器还是ie8,十分感谢
6 年多之前 回复
立即提问
相关内容推荐