我仍然在学习CSS，并且遇到一个令人困惑的问题，即在另一个div元素中出现滑入式标题。当我自己有标题幻灯片而没有编辑它背后的图像的属性时，它工作得很好但是当我在我的网页中编辑它以使它更适合所有字幕时，所有弹出窗口底部的背景div 。
THIS就是这个数字本身或我不编辑它时所做的，但是如果你看下面的代码会导致这个幻灯片在另一个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>
答案 0 :(得分：0)
删除.之前，请参阅小提琴http://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;
}