将图像放在上面

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>

            

this is the page without the second image

Answer 1

您需要尝试使用CSS的position属性。这样您就可以更好地控制元素。

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

基本上，如果您将div设置为position: relative，则意味着您可以调整div的位置，而无需更改网页的布局。这也意味着具有div的{​​{1}}的任何子元素都可以位于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%;
}

Answer 2

您需要设置z-index这是一个css属性，用于确定哪个元素位于顶部

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index