我在堆叠div然后翻译它们时遇到问题

Question

我已经将6个div叠放在一起，当上一个div悬停时，它旁边的所有其他div都向左平移了150px。但它们相互之间向前方向前进，在上一个div下方向后移动，最后坐在其上方。我希望他们回到上一个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

I'm not sure if I understand your problem correctly, but if you mean the rectangles should always keep the same position in the stacking order (whether they're moving or not), all you need to do is remove all the z-index properties.

#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>

If that is not what you mean, please let me know and I'll see what I can do.