Piling up flex items
<p>I'm trying to achieve kind of a button-controlled slideshow, involving a <code>div</code> for a full-width picture on the top of the page, a <code>div</code> for another full-width picture on the bottom of the page and a final <code>div</code> for the central content (which includes buttons controlling the "slideshow").</p>

<p>So, basically, the buttons on the central div triggers picture change on both top and bottom div. There is a "neutral" picture on each of these div when no button is active ; when one is active, both top and bottom picture switch for other pictures.</p>

<p>I actually managed to do this, using Flexbox for <code>div</code> positionning and jQuery to show/hide pictures according to which button is active.</p>

<p>But my issue is I can't really animate (slide, fade, ...) my pictures ; they are placed in the background of their respective <code>div</code> ; I tried displaying all at the same time, hoping on will be displayed behind the other, but it seems that only the first is actually displaying.</p>

<p>My question is : is it possible to make Flexbox items piling up, so I could stack two divs, one on top of the other, allowing me to make a "discover" effect (thus I need to have a first div on the back and second div on the front that slides in) ?</p>

<p>Here is my code (sorry, selectors are partially in french and I didn't included the pictures) :</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import 'https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,700,700i';
 body,
html {
  height: 100%;
  font-size: 16px;
}
#flex-container {
  display: flex;
  height: 100%;
  background: grey;
  flex-direction: column;
  overflow: hidden;
}
#bloc-central {
  height: 180px;
  width: 100%;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  padding: 5px 0;
  align-self: center;
  order: 2;
  z-index: 9999;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#bloc-central-in {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #fff;
}
/* ==================
   FONDS HAUT ET BAS
   ================== */

/* ----- POSITIONNEMENT DES 2 FONDS ----- */

#background-top,
#background-bottom {
  width: 100%;
  min-height: 50%;
  z-index: 1;
  position: relative;
}
#background-top &gt; *,
#background-bottom &gt; * {
  min-height: 100%;
  background-size: cover;
}
#background-top {
  align-self: flex-start;
  order: 1;
}
#background-bottom {
  align-self: flex-end;
  order: 2;
}
/* ----- FONDS NEUTRES ----- */

.background-neutre-top {
  background: #f00 no-repeat center 50% fixed;
}
.background-neutre-bottom {
  background: #f00 no-repeat center -50% fixed;
}
/* ----- FONDS MODE ----- */

.background-mode-top {
  background: #bbb no-repeat center 50% fixed;
}
.background-mode-bottom {
  background: #bbb no-repeat center -50% fixed;
}
/* ----- FONDS COIFFURE ----- */

.background-coiffure-top {
  background: #313131 no-repeat center 50% fixed;
}
.background-coiffure-bottom {
  background: #313131 no-repeat center -50% fixed;
}
/* ----- FONDS INSTITUT ----- */

.background-institut-top {
  background: #000 no-repeat center 50% fixed;
}
.background-institut-bottom {
  background: #000 no-repeat center -50% fixed;
}
#bloc-univers {
  align-self: center;
}
#select-univers {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.125em;
  color: #c9c9c9;
}
.titre-ligne {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0 15px;
  margin: 0 0 10px 0;
}
.titre-ligne:before,
.titre-ligne:after {
  flex-grow: 1;
  height: 1px;
  content: '\a0';
  background-color: #ddd;
  position: relative;
  top: 0.5em;
}
.titre-ligne:before {
  margin-right: 10px;
}
.titre-ligne:after {
  margin-left: 10px;
}
.btn-univers:link,
.btn-univers:visited {
  display: inline-block;
  width: 100%;
  height: 50px;
  border: 1px solid #c9c9c9;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 1.750em;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  color: #c9c9c9;
  transition: all .2s ease-in-out;
}
#btn-mode:hover {
  color: #f08945;
  border: 1px solid #f08945;
}
#btn-coiffure:hover {
  color: #0fc798;
  border: 1px solid #0fc798;
}
#btn-institut:hover {
  color: #3f9cf2;
  border: 1px solid #3f9cf2;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;div id="flex-container"&gt;
  &lt;div id="background-top"&gt;
    &lt;div class="background-neutre-top"&gt;&lt;/div&gt;
    &lt;div class="background-mode-top"&gt;&lt;/div&gt;
    &lt;div class="background-coiffure-top"&gt;&lt;/div&gt;
    &lt;div class="background-institut-top"&gt;&lt;/div&gt;
  &lt;/div&gt;

  &lt;div id="background-bottom"&gt;
    &lt;div class="background-neutre-bottom"&gt;&lt;/div&gt;
    &lt;div class="background-mode-bottom"&gt;&lt;/div&gt;
    &lt;div class="background-coiffure-bottom"&gt;&lt;/div&gt;
    &lt;div class="background-institut-bottom"&gt;&lt;/div&gt;
  &lt;/div&gt;




  &lt;div id="bloc-central"&gt;
    &lt;div id="bloc-central-in"&gt;
      &lt;div class="container"&gt;

        &lt;div id="logo-viceversa" class="col-md-6"&gt;LOGO&lt;/div&gt;

        &lt;div id="bloc-univers" class="col-md-6"&gt;
          &lt;div class="row text-center" id="select-univers"&gt;
            &lt;span class="titre-ligne"&gt;CHOISISSEZ VOTRE UNIVERS&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div&gt;&lt;a id="btn-mode" class="btn-univers" href="#"&gt;MODE&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div&gt;&lt;a id="btn-coiffure" class="btn-univers" href="#"&gt;COIFFURE&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div&gt;&lt;a id="btn-institut" class="btn-univers" href="#"&gt;INSTITUT&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Thank you very much !</p>