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

Question

我做了 6 个div，每个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

我不确定我是否正确理解了您的问题，但是如果您的意思是矩形应始终在堆叠顺序中保持相同的位置(无论它们是否在移动(，您需要做的就是删除所有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>

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