我在堆叠的div有问题，然后他们翻译

Question

我做了每6周各的div上面other.When堆叠以前DIV盘旋所有其它的div旁边的翻译150像素离开。但他们去上面相互正向和反向来上一格的下方，那么到底坐在它上面。我希望他们回来之前的DIV以上。我该怎么做？

#numberOne {
  max-height: 500px;
  min-width: 300px;
  border-radius: 16px;
  margin-top: 30px;
  z-index: 0;
  position: relative;
  left: 10px;
  box-shadow: -3px -5px 16px black;
  background: #17141d;
}

#numberTwo {
  height: 500px;
  width: 300px;
  box-shadow: -3px -5px 16px black;
  background: #17141d;
  border-radius: 16px;
  margin-top: 30px;
  z-index: 1;
  position: relative;
  left: -150px;
}

#numberThree {
  height: 500px;
  width: 300px;
  box-shadow: -3px -5px 16px black;
  background: #17141d;
  border-radius: 16px;
  margin-top: 30px;
  z-index: 2;
  position: relative;
  left: -300px;
}

#numberFour {
  height: 500px;
  width: 300px;
  box-shadow: -3px -5px 16px black;
  background: #17141d;
  border-radius: 16px;
  margin-top: 30px;
  z-index: 3;
  position: relative;
  left: -450px;
}

#numberFive {
  height: 500px;
  width: 300px;
  box-shadow: -3px -5px 16px black;
  ;
  background: #17141d;
  border-radius: 16px;
  z-index: 4;
  margin-top: 30px;
  position: relative;
  left: -600px;
}

#numberSix {
  height: 500px;
  width: 300px;
  box-shadow: -3px -5px 16px black;
  background: #17141d;
  border-radius: 16px;
  margin-top: 30px;
  z-index: 5;
  position: relative;
  left: -750px;
}

#pileone,
#piletwo,
#pilethree,
#pilefour,
#numberSix {
  display: flex;
  position: relative;
  transition: all 1s ease-in;
  z-index: 8;
}

#numberOne:hover+#pileone {
  transform: translate(150px);
}

#numberTwo:hover+#piletwo {
  z-index: 1;
  transform: translate(150px);
}

#numberThree:hover+#pilethree {
  z-index: 2;
  transform: translate(150px);
}

#numberFour:hover+#pilefour {
  z-index: 2;
  transform: translate(150px);
}

#numberFive:hover+#numberSix {
  z-index: 2;
  transform: translate(150px);
}

<div id="portfolio">
  <div id="numberOne">
  </div>
  <div id="pileone">
    <div id="numberTwo">
    </div>
    <div id="piletwo">
      <div id="numberThree">
      </div>
      <div id="pilethree">
        <div id="numberFour">
        </div>
        <div id="pilefour">
          <div id="numberFive">
          </div>
          <div id="numberSix">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我不知道如果我正确地理解你的问题，但如果你的意思是矩形应始终保持在堆叠顺序相同的位置（不管他们是在运动或不运动），所有你需要做的是去除所有z-index属性。

#numberOne {
  max-height: 500px;
  min-width: 300px;
  border-radius: 16px;
  margin-top: 30px;
  position: relative;
  left: 10px;
  box-shadow: -3px -5px 16px black;
  background: #17141d;
}

#numberTwo {
  height: 500px;
  width: 300px;
  box-shadow: -3px -5px 16px black;
  background: #17141d;
  border-radius: 16px;
  margin-top: 30px;
  position: relative;
  left: -150px;
}

#numberThree {
  height: 500px;
  width: 300px;
  box-shadow: -3px -5px 16px black;
  background: #17141d;
  border-radius: 16px;
  margin-top: 30px;
  position: relative;
  left: -300px;
}

#numberFour {
  height: 500px;
  width: 300px;
  box-shadow: -3px -5px 16px black;
  background: #17141d;
  border-radius: 16px;
  margin-top: 30px;
  position: relative;
  left: -450px;
}

#numberFive {
  height: 500px;
  width: 300px;
  box-shadow: -3px -5px 16px black;
  ;
  background: #17141d;
  border-radius: 16px;
  margin-top: 30px;
  position: relative;
  left: -600px;
}

#numberSix {
  height: 500px;
  width: 300px;
  box-shadow: -3px -5px 16px black;
  background: #17141d;
  border-radius: 16px;
  margin-top: 30px;
  position: relative;
  left: -750px;
}

#pileone,
#piletwo,
#pilethree,
#pilefour,
#numberSix {
  display: flex;
  position: relative;
  transition: all 1s ease-in;
}

#numberOne:hover+#pileone {
  transform: translate(150px);
}

#numberTwo:hover+#piletwo {
  transform: translate(150px);
}

#numberThree:hover+#pilethree {
  transform: translate(150px);
}

#numberFour:hover+#pilefour {
  transform: translate(150px);
}

#numberFive:hover+#numberSix {
  transform: translate(150px);
}

<div id="portfolio">
  <div id="numberOne">
  </div>
  <div id="pileone">
    <div id="numberTwo">
    </div>
    <div id="piletwo">
      <div id="numberThree">
      </div>
      <div id="pilethree">
        <div id="numberFour">
        </div>
        <div id="pilefour">
          <div id="numberFive">
          </div>
          <div id="numberSix">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果这不是你的意思，请让我知道，我会看看我能做些什么。