Javascript 如何使用CSS重叠三个div？

我遇到了一个问题，我需要这样做：

我被CSS卡住了

另外，当我点击任何一个div时，它应该一直显示到顶部

.boxwrap{
左边距：自动；
右边距：自动；
顶部：50px；
}
.盒子{
宽度：100px；
高度：100px；
}
#框1{
左边距：-100px；
背景色：红色；
}
#框2{
利润上限：-50px；
边缘底部：-50px；
左边距：0px；
背景色：黑色；
}
#框3{
左边距：100px；
背景颜色：绿色；
}

---

添加一个

z索引

如下：

.boxwrap{
左边距：自动；
右边距：自动；
顶部：50px；
}
.盒子{
宽度：100px；
高度：100px；
}
#框1{
左边距：-100px；
背景色：红色；
位置：相对位置；
z指数：2；
}
#框2{
利润上限：-50px；
边缘底部：-50px；
左边距：0px；
背景色：黑色；
位置：相对位置；
z指数：1；
}
#框3{
左边距：100px；
背景颜色：绿色；
位置：相对位置；
z指数：2；
}

---

在.box上设置属性位置

 .box{
  width: 100px;
  height: 100px;
  position: relative;
}

并为上部元素添加属性z-index:1，为下部元素添加属性z-index:0

 #box1{
  margin-left: -100px;
  background-color: red;
  z-index: 1;
}

 #box2{
  margin-top: -50px;
  margin-bottom: -50px;
  margin-left: 0px;
  background-color: black;
  z-index: 0;
}

 #box3{
  margin-left: 100px;
  background-color: green;
  z-index: 1;
}

.boxwrap{
左边距：自动；
右边距：自动；
顶部：50px；
}
.盒子{
宽度：100px；
高度：100px；
}
#框1{
左边距：-100px；
背景色：红色；
显示：内联块
}
#框2{
利润上限：-50px；
边缘底部：-50px；
左边距：0px；
背景色：黑色；
}
#框3{
左边距：100px；
背景颜色：绿色；
}

---

使其工作的唯一方法是不断增加每个

上的
z-index
值。在任何
.box
上单击（）

，这样它就不会对其他项进行任何重叠更改：

var z=2；/*需要至少为2，如果在第一次单击时单击黑色的，则比其他两个高1*/
$（'.box'）。单击（函数（）{
$（this.css（'z-index'，z++）；
});
.boxwrap{
左边距：自动；
右边距：自动；
顶部：50px；
}
.盒子{
宽度：100px；
高度：100px；
位置：相对；/*或“绝对”、“固定”*/
}
#框1{
左边距：-100px；
背景色：红色；
z索引：1；/*1比默认为0的黑色索引多*/
}
#框2{
利润上限：-50px；
边缘底部：-50px；
左边距：0px；
背景色：黑色；
/*这里的“z指数”不能为负，因为你不能点击它，最好把另外两个1级/层放高一点*/
}
#框3{
左边距：100px；
背景颜色：绿色；
z指数：1；/*此处相同*/
}

如何放置单击处理程序，以便当我单击任何div时，它会一直显示到top@parvez用jQuery这样的库试试。一点提示：