html - 堆积 flex 元素

Question

我正在尝试实现某种按钮控制的幻灯片放映，其中包括用于页面顶部全 Angular 图片的 div，用于页面顶部的 div页面底部的另一张全 Angular 图片和中​​央内容的最终 div(包括控制“幻灯片放映”的按钮)。

所以，基本上，中央 div 上的按钮会触发顶部和底部 div 上的图片更改。当没有按钮处于事件状态时，每个 div 上都有一个“中性”图片；当一个激活时，顶部和底部图片都切换为其他图片。

我实际上设法做到了这一点，使用 Flexbox 进行 div 定位，并使用 jQuery 根据激活的按钮显示/隐藏图片。

但我的问题是我无法真正为我的图片设置动画(滑动、淡入淡出...)；它们被放置在各自 div 的背景中；我试过同时显示所有，希望一个显示在另一个后面，但似乎只有第一个在显示。

我的问题是:是否有可能让 Flexbox 元素堆积起来，这样我就可以堆叠两个 div，一个在另一个之上，让我产生“发现”效果(因此我需要第一个 div 在滑入的前面的后面和第二个 div)？

这是我的代码(抱歉，选择器部分是法语的，我没有包含图片):

@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 > *,
#background-bottom > * {
  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;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="flex-container">
  <div id="background-top">
    <div class="background-neutre-top"></div>
    <div class="background-mode-top"></div>
    <div class="background-coiffure-top"></div>
    <div class="background-institut-top"></div>
  </div>

  <div id="background-bottom">
    <div class="background-neutre-bottom"></div>
    <div class="background-mode-bottom"></div>
    <div class="background-coiffure-bottom"></div>
    <div class="background-institut-bottom"></div>
  </div>




  <div id="bloc-central">
    <div id="bloc-central-in">
      <div class="container">

        <div id="logo-viceversa" class="col-md-6">LOGO</div>

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

非常感谢!

Answer 1

我用 z-index 和 opacity 在图像之间做淡入淡出，也许代码不是很干净，但你可以接受这个想法:

$(".btn-univers").click(function() {
  var buttonId = $(this).attr('id').split('-');
  var buttonName = buttonId[1];
  var bgTop = ".background-" + buttonName + "-top";
  var bgBottom = ".background-" + buttonName + "-bottom";
  $("#background-top > div").each(function() {
    var zIndex = $(this).css("z-index");
    if (zIndex == 2) {
      $(this).css("z-index", "1")
    }
    if (zIndex == 3) {
      $(this).css("z-index", "2")
    }
  });
  $("#background-bottom > div").each(function() {
    var zIndex = $(this).css("z-index");
    if (zIndex == 2) {
      $(this).css("z-index", "1")
    }
    if (zIndex == 3) {
      $(this).css("z-index", "2")
    }
  });
  if ($(bgTop).css("z-index") != 2) {
    $(bgTop).css({
      "z-index": "3",
      "opacity": "0"
    }).animate({
      opacity: 1
    }, 500);
    $(bgBottom).css({
      "z-index": "3",
      "opacity": "0"
    }).animate({
      opacity: 1
    }, 500);
  }

});

@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 > *,
#background-bottom > * {
  min-height: 100%;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#background-top {
  align-self: flex-start;
  order: 1;
}
#background-bottom {
  align-self: flex-end;
  order: 2;
}
/* ----- FONDS NEUTRES ----- */

.background-neutre-top {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Rope.jpg) no-repeat center 50% fixed;
  z-index: 1;
}
.background-neutre-bottom {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Rope.jpg) no-repeat center -50% fixed;
  z-index: 1;
}
/* ----- FONDS MODE ----- */

.background-mode-top {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Circus.jpg) no-repeat center 50% fixed;
  opacity: 0;
}
.background-mode-bottom {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Circus.jpg) no-repeat center -50% fixed;
  opacity: 0;
}
/* ----- FONDS COIFFURE ----- */

.background-coiffure-top {
  background: url(http://dummy-images.com/abstract/dummy-480x270-FairyLights.jpg) no-repeat center 50% fixed;
  opacity: 0;
}
.background-coiffure-bottom {
  background: url(http://dummy-images.com/abstract/dummy-480x270-FairyLights.jpg) no-repeat center -50% fixed;
  opacity: 0;
}
/* ----- FONDS INSTITUT ----- */

.background-institut-top {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Bottles.jpg) no-repeat center 50% fixed;
  opacity: 0;
}
.background-institut-bottom {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Bottles.jpg) no-repeat center -50% fixed;
  opacity: 0;
}
#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;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flex-container">
  <div id="background-top">
    <div class="background-neutre-top"></div>
    <div class="background-mode-top"></div>
    <div class="background-coiffure-top"></div>
    <div class="background-institut-top"></div>
  </div>

  <div id="background-bottom">
    <div class="background-neutre-bottom"></div>
    <div class="background-mode-bottom"></div>
    <div class="background-coiffure-bottom"></div>
    <div class="background-institut-bottom"></div>
  </div>




  <div id="bloc-central">
    <div id="bloc-central-in">
      <div class="container">

        <div id="logo-viceversa" class="col-md-6">LOGO</div>

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