<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {}
#container {
position: absolute;
background-color: black;
width: 500px;
height: 500px;
}
#abox {
position: absolute;
left: 100px;
top: 0px;
background-color: pink;
width: 100px;
height: 200px;
z-index: 2;
}
#bbox {
position: absolute;
left: 50px;
top: 80px;
background-color: yellow;
width: 100px;
height: 200px;
z-index: 3;
}
#cbox {
position: absolute;
left: 0px;
top: 50px;
background-color: blue;
width: 200px;
height: 100px;
z-index: 1;
}
#dbox {
position: absolute;
left: 120px;
top: 100px;
background-color: green;
width: 200px;
height: 100px;
z-index: 4;
}
#op {
position: absolute;
top: 400px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="abox" class="box"></div>
<div id="bbox" class="box"></div>
<div id="cbox" class="box"></div>
<div id="dbox" class="box"></div>
<div id="op">
<br/>
<label>opacity</label>
<input id="alphalnp" type="text" value="80" />
<input id="b1" type="button" value="setting" />
<br/>
<input id="b2" type="button" value="move up" />
<input id="b3" type="button" value="move down" />
<input id="b4" type="button" value="move to top" />
<input id="b5" type="button" value="move to bottom" />
</div>
</div>
<script type="text/javascript">
var current_index = 0;
$(document).ready(function() {
$("#b1").click(function() {
$(".box").each(function() {
alert($(this).css("z-index"));
});
});
$(".box").click(function() {
var $box_z = $(".box");
var box_z_length = $box_z.length;
var $self = $(this);//get the current color block object
//move up one layer
$("#b2").click(function() {
current_index = 0;
var self_current_index = parseInt($self.css("z-index")) + 1;
//$self.css("z-index", self_current_index + 1);
$(".box").each(function() {
if (parseInt($(this).css("z-index")) == self_current_index) {
current_index = parseInt($(this).css("z-index")) - 1;
$(this).css("z-index", current_index);
//break;
$self.css("z-index", self_current_index);
}
});
});
//move down one layer
$("#b3").click(function() {
current_index = 0;
var self_current_index = parseInt($self.css("z-index")) - 1;
//$self.css("z-index", self_current_index + 1);
$(".box").each(function() {
if (parseInt($(this).css("z-index")) == self_current_index) {
current_index = parseInt($(this).css("z-index")) + 1;
$(this).css("z-index", current_index);
//break;
$self.css("z-index", self_current_index);
}
});
});
//move to top
$("#b4").click(function() {
$(".box").each(function() {
if (parseInt($(this).css("z-index")) > parseInt($self.css("z-index"))) {
current_index = parseInt($(this).css("z-index")) - 1;
$(this).css("z-index", current_index);
// alert($(this).css("z-index"));
}
});
$self.css("z-index", "4");
});
//move to bottom
$("#b5").click(function() {
//alert($self.css("z-index"));
$(".box").each(function() {
if (parseInt($(this).css("z-index")) < parseInt($self.css("z-index"))) {
//alert(current_index);
current_index = parseInt($(this).css("z-index")) + 1;
$(this).css("z-index", current_index);
}
});
$self.css("z-index", 1);
});
}); //$("#cbox,#abox,#bbox,#dbox").click(function())
}); //document
</script>
</body>
</html>
有关问题的图片链接（pic link）
这是我的脚本代码，其中包含简单的逻辑代码。但是我遇到了一些意想不到的问题，例如：当我点击向上移动时，它似乎折磨了两个块的相对位置和其他一些我无法解决的问题descibe。
我的代码出了什么问题？
