如何使用CSS重叠三个div？

Question

我遇到了一个需要做这样的事情的问题：

我被困在CSS上

此外，当我单击任意一个div时，它应该一直浮到顶部。

.boxwrap{
  margin-left: auto;
  margin-right: auto;
  top: 50px;
}

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center" class="boxwrap">
  <div class="box" id="box1">
  
  </div>
  <div class="box" id="box2">
  
  </div>
  <div class="box" id="box3">
  
  </div>
</div>

Answer 1

像这样添加z-index：

.boxwrap{
  margin-left: auto;
  margin-right: auto;
  top: 50px;
}

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center" class="boxwrap">
  <div class="box" id="box1">
  
  </div>
  <div class="box" id="box2">
  
  </div>
  <div class="box" id="box3">
  
  </div>
</div>

注意：z-index仅适用于定位的元素

Answer 2

使其生效的唯一方法是在任何z-index的每个.click()上不断增加.box 值，这样就不会出现到其他任何重叠更改：

var z = 2; /* needs to be at least 2, to be 1 above the other two if clicked on the black one for as the first click */

$('.box').click(function(){
  $(this).css('z-index', z++);
});

.boxwrap {
  margin-left: auto;
  margin-right: auto;
  top: 50px;
}

.box {
  width: 100px;
  height: 100px;
  position: relative; /* or "absolute", "fixed" */
}

#box1 {
  margin-left: -100px;
  background-color: red;
  z-index: 1; /* 1 more than the black one with the default 0 */
}

#box2 {
  margin-top: -50px;
  margin-bottom: -50px;
  margin-left: 0px;
  background-color: black;
  /* here the "z-index" mustn't be negative, because you won't be able to click on it, better the put the other two 1 level/layer higher */
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div align="center" class="boxwrap">
  <div class="box" id="box1">
  
  </div>
  <div class="box" id="box2">
  
  </div>
  <div class="box" id="box3">
  
  </div>
</div>

Answer 3

在.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;
}

Answer 4

 function clickMe(){
 $Lightning.use("c:dependancyapp", function() {
 $Lightning.createComponent("c:demoComp",
      { "someAttribute" : "attribute value"},
        "lightning",
         function(cmp) {
            // do some stuff
       });
   });
  }

.boxwrap{
  margin-left: auto;
  margin-right: auto;
  top: 50px;
}

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

#box1{
  margin-left: -100px;
  background-color: red;
display:inline-block
}

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

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