Div分裂在CSS / HTML底部

Question

我在.back上有一个带有Image的多个div，在.front类有一些文本

但由于某种原因，它总是在底部看起来像这样：

div进一步位于顶部，但文本移动到屏幕顶部的div上方，如下所示：

这只发生在页面的顶部/底部中间，这些文本框正好显示在div的中间。

（不要看看它们从Instagram上加载的奇怪图片）

HTML：

<div class="flip-container">
 <div class="flipper">
  <div class="front"><p>Some Text</p></div>
  <div class="back"><img src="imgsrc"></div>
 </div>
</div>

CSS：

/*############################## BODY ##############################*/

@media (min-width: 1401px) {
  #bloemfies {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  -ms-column-count:     5;
  column-count:         5;
  }


}
@media (max-width: 1400px) {
  #bloemfies {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  -ms-column-count:     3;
  column-count:         3;
  }

}
@media (max-width: 1000px) {
  #bloemfies {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  -ms-column-count:     2;
  column-count:         2;
  }

}
@media (max-width: 600px) {
  #bloemfies {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  -ms-column-count:     1;
  column-count:         1;
  }
  .back img{
      min-width: 480px;
  }
}

#bloemfies{
   clear: both;
}


/*Container flip*/
/* entire container, keeps perspective */
.flip-container{
  /* Just in case there are inline attributes */
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 1em;
  background-color: rgba(226, 223, 223, 1);
  min-height: 120px;
}
.flip-container, .front, .back {

}

/* flip speed goes here */
.flipper {
        position: relative;
}

/* hide back of pane during swap */
.front, .back {
        backface-visibility: hidden;
        transition: 0.8s;
        transform-style: preserve-3d;
}

/*  UPDATED! front pane, placed above back */
.back {
        z-index: 2;
        transform: rotateY(0deg);
        height: 90%;
}

/* back, initially hidden pane */
.front {
        transform: rotateY(180deg);
        position:absolute;
        overflow: auto;
        word-break: normal;
        height: 89%;
        width: 89%;
        line-height: 1.2;
        color: black;
}

.back img{
        max-width: 90%;
        height: auto;
        margin: 1em;
        overflow: hidden;
}

Answer 1

给.back位置：绝对。它将被放置在哈希标记div（.front）

之上

.back{
   position:absolute;
   z-index: 2;
   transform: rotateY(0deg);
   height: 90%;
}