У меня проблема с накоплением div и последующим переводом

Question

Я сделал 6 делений каждый, сложенных друг над другом. Когда предыдущий делитель наведен, все остальные деления рядом с ним переводятся влево на 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>

Если это не , что вы имеете в виду, пожалуйста, дайте мне знать, и я посмотрю, что я могу сделать.