Сложите несколько изображений друг над другом, используя Flex Box

Question

Я использую flex box для создания вращающейся галереи изображений, и мне нужно, чтобы все изображения располагались друг над другом, один за другим. Я могу сделать это с позиционированием изображений как абсолютных, но это испортит содержащую гибкую коробку, так что изображения появляются за пределами контейнера.

$(function() {

  $("#slideshow > div:gt(0)").hide();

  setInterval(function() {
    $('#slideshow > div:first')
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo('#slideshow');
  }, 3000);
});

#slideshow {
  margin: 50px auto;
  position: relative;
  display: flex;
  height: fit-content;
  align-items: center;
  width: 90%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

#slideshow>div {
  margin: 10px;
  flex: 1;
}

#slideshow div img {
  max-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
  <div>
    <img src="https://www.ncat.edu/caes/cooperative-extension/programs/sfw-files/gallery-photos/checking-copy---resized.jpg" />
  </div>
  <div>
    <img src="https://www.ncat.edu/caes/cooperative-extension/programs/sfw-files/gallery-photos/phyllis-kesling-sfoy-candidate_0074-copy-copy---resized.jpg" />
  </div>
</div>

И чтобы сделать жизнь проще, вот ссылка JSFiddle

JSFiddle Пример того, что я делаю

Как я могу сложить изображения, используя flexbox? Я установил здесь небольшую JSFiddle, чтобы вы могли видеть, что я делаю ... так как вы можете видеть, что изображения вращаются, но другое изображение появляется рядом с первым изображением ...

Спасибо за заранее ко всей этой помощи!

Answer 1

Невозможно сделать это с помощью flex, так как flex предназначен для размещения вещей друг вокруг друга. Однако, если вы переключитесь на использование flex, вы можете установить это очень легко: https://codepen.io/adamjamesturner/pen/VwYoRVp

Вам просто нужно изменить css на:

#slideshow {
     margin: 50px auto;
     position: relative;
     display: grid;        // Change here
     height: fit-content;
     align-items: center;
     width: 90%;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
 }

 #slideshow>div {
     margin: 10px;
     grid-rows: 1/2;    // Change here
     grid-columns: 1/2; // Change here
 }

#slideshow div img {
     max-width: 100%;
}

Answer 2

Вы должны использовать положение: абсолютное, чтобы складывать вещи друг на друга

 #slideshow {
    margin: 50px auto;
    position: relative;
    width: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
 }

 #slideshow > div {
    position: absolute;
 }

 #slideshow div img {
    max-width: 100%;
 }