html - 在上面放一张图片

Question

我目前正在制作一个元素，其中包含一个播放电影和电视节目的网站，我想在电视节目部分插入一张图片来说明每一集。我的想法是制作第二张图片以显示该图片对应的剧集，但我在将第二张图片放在第一张图片上方时遇到了一些麻烦。

.episode-slidebackground {
    width: 950px;
    height: 220px;
    background: rgba(162, 162, 162, 0.24);
    float: left;
    margin-left: 15px;
    margin-top: 20px;
    margin-bottom: 15px;
}

.episode-slidebackground img {
    width:182px;
    height:136px;
    float: left;
    margin-left: 7px;
    margin-top: 7px;
    margin-bottom: 5px;
    border-radius: 15px;
}


.episode-slideimgbackground{
width: 925px;
margin-left:10px;
margin-right:10px;
height:145px;
background: rgba(128, 128, 128, 0.24)
}

h1{
    font-size: 30px;
    color: #f2a223;
    font-weight: bold;
    margin-bottom: 30px;
    margin-top: 10px;

}
h2 {
    font-size: 15px;
    color: #f2a223;
    font-weight: bold;
}

h3 {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
}

h4 {
    font-size: 14px;
    color: #f3b12b;
    font-weight: bold;
}

h5 {
    font-size: 12px;
    color: white;

}

h6 {
    font-size: 20px;
    color: white;
    padding-left: 5px;
    padding-top: 5px;
}

<div class="episode-slidebackground">
                <h6>Temporada:1 2 3 4 5 6</h6> <br>
                <h2>Episódios:</h2>
                <div class="episode-slideimgbackground">
                <img src="img/1.jpg">
                <img src="img/2.jpg">
                <img src="img/3.jpg">
</div>
                </div>

这是没有第二张图片的页面:

Answer 1

您需要尝试使用 CSS 的 position属性。这将使您能够更好地控制您的元素。

您需要使用的两个位置属性是 absolute和 relative .

基本上，如果你有一个 div设置为 position: relative这意味着您可以调整 div的位置而不改变网页的布局。这也意味着 div 的任何子元素与 position: absolute可以位于 relative 内的任何位置div .

.videoContainer {
  position: relative;
  height: 200px;
  width: 200px;
}

.videoImage, .videoCaption {
  position: absolute;
  color: white;
}

.videoCaption {
  bottom: 0;
  height: 50px;
  background: Gray;
  width: 100%;
}

<div class="videoContainer">
  <img class="videoImage" src="http://placehold.it/200x200"/>
  <div class="videoCaption">Some Caption</div>
</div>