幻灯片中的标题弹出错误 div

Question

我仍在学习 CSS 并且遇到一个令人困惑的问题，即 slide-in 标题出现在不同的 div 元素中。当我在不编辑其背后图像的属性的情况下自行滑入标题时，它工作得很好但是当我在我的网页中编辑它以使其更适合底部的所有 pop-up 的标题时背景 div。

THIS 是图形本身或当我不编辑它时所做的，但是如果您查看下面的代码，某些东西会导致此 slide-in 到 pop-up一个不同的 div，我不知道它是什么。

CSS:

html, body {
              margin: 0px;
              padding: 0;
              border: 0;
              width: 100%;
              height: 100%;
            }
            .background-image {
              left: 0;
              top: 0;
              z-index: 1;
              display: block;
              background-image: url(https://www.kasandbox.org/programming-images/landscapes/mountains-in-hawaii.png);
              background-size: cover;
              width: 100%;
              height: 100%;
              -webkit-filter: blur(10px);
              -moz-filter: blur(10px);
              -o-filter: blur(10px);
              -ms-filter: blur(10px);
              filter: blur(10px);
            }
            .bodybox {
              background-color: rgba(245, 245, 245, 0.6);
              position:fixed;
              padding:0;
              margin:0;
              border: 0;
              top:0;
              left:0;
              width: 100%;
              height: 100%;
              z-index:2;
              overflow: scroll;
            }
            .heading {
              background-color: rgba(0,0,0,.75);
              width: 100%;
              height: 10%;
              color: rgb(255,255,255);
              text-align: right;
              margin: 0;
              border: 0;
              padding: 0;
              z-index: 2;
              display: table;
              vertical-align: center;
            }
            .travel_menu {
                background-color: rgba(124,175,192,0.75);
                color: rgb(255, 255, 255);
                padding: 0;
                height: 200px;
                width: 100%;
                max-width: 100%;
                z-index: 2;
                text-align: left;
                vertical-align: center;
                display: inline-flex;
            }
            .
            figure {
              z-index: 3;
              display: block;
              position: relative;
              float: left;
              overflow: hidden;
              margin: 0 20px 20px 0;
            }
            figcaption {
              position: absolute;
              background: black;
              background: rgba(0,0,0,0.75);
              color: white;
              padding: 10px 20px;
              opacity: 0;
              font-size: 15px;
              -webkit-transition: all 0.6s ease;
              -moz-transition:    all 0.6s ease;
              -o-transition:      all 0.6s ease;
            }
            figure:hover figcaption {
              opacity: 1;
            }
            figure:before {
              content: "?";
              position: absolute;
              font-weight: 800;
              background: black;
              background: rgba(255,255,255,0.75);
              text-shadow: 0 0 5px white;
              color: black;
              width: 24px;
              height: 24px;
              -webkit-border-radius: 12px;
              -moz-border-radius:    12px;
              border-radius:         12px;
              text-align: center;
              font-size: 14px;
              line-height: 24px;
              -moz-transition: all 0.6s ease;
              opacity: 0.75;
            }
            figure:hover:before {
              opacity: 0;
            }
            .cap-bot:before { bottom: 10px; left: 10px; }
            .cap-bot figcaption { left: 0; bottom: -30%;}
            .cap-bot:hover figcaption { bottom: 0; }
            .container {
              width: 300px;
              height: 180px;

            }
            .container img {
              width: 100%;
              height: auto;
            }
            h2{
              padding-top: 0;
              margin-top: 0;
            }
            h1{
              padding-top: 0;
              margin-top: 0;
              line-height: 10px;
              padding: 10px 0;
              display:table-cell;
              vertical-align: bottom;
            }

HTML:

<div class="background-image"></div>
    <body>

    <div class="bodybox">

      <div class="heading"><h1>Travel to ....</h1></div>
      <div class="travel_menu">
        <div class="container">
          <figure class="cap-bot">
            <img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain.">
            <figcaption>
              Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead!
            </figcaption>
          </figure>
        </div>
         <div class="container">
          <figure class="cap-bot">
            <img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain.">
            <figcaption>
              Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead!
            </figcaption>
          </figure>
        </div>
         <div class="container">
          <figure class="cap-bot">
            <img src="https://www.kasandbox.org/programming-images/landscapes/fields-of-grain.png" alt="rolling hills of grain.">
            <figcaption>
              Three weeks from now, I will be harvesting my crops. Imagine where you will be, and it will be so. Hold the line! Stay with me! If you find yourself alone, riding in the green fields with the sun on your face, do not be troubled. For you are in Elysium, and you're already dead!
            </figcaption>
          </figure>
        </div>
      </div>

    </div>    
    </body>

Answer 1

去掉图前的.见fiddlehttp://jsfiddle.net/DIRTY_SMITH/hhftbyqk/6/

改变这个：

 .
figure {
                  z-index: 3;
                  display: block;
                  position: relative;
                  float: left;
                  overflow: hidden;
                  margin: 0 20px 20px 0;
                }

到这个：

figure {
                  z-index: 3;
                  display: block;
                  position: relative;
                  float: left;
                  overflow: hidden;
                  margin: 0 20px 20px 0;
                }

幻灯片中的标题弹出错误 div

slide in caption popping up in the wrong div

html

css

divide