2016-05-18 143 views
2

我目前正在製作一個項目,其中包括一個網站,這是一個流電影和電視節目,在電視節我想插入一個圖像插入一個插曲,這意味着每集一個圖像,我的想法是製作第二張圖片,顯示與該圖片相符的最後一集,並且將第二張圖片放在第一張圖片上方時遇到了一些麻煩。把圖像放在上面

.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 { 
 
\t width:182px; 
 
\t height:136px; 
 
    float: left; 
 
    margin-left: 7px; 
 
    margin-top: 7px; 
 
    margin-bottom: 5px; 
 
\t 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; 
 
\t padding-top: 5px; 
 
}
<div class="episode-slidebackground"> 
 
       <h6>Temporada:1 2 3 4 5 6</h6> <br> 
 
\t \t \t \t <h2>Episódios:</h2> 
 
\t \t \t \t <div class="episode-slideimgbackground"> 
 
\t \t \t \t <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

this is the page without the second image

回答

1

您需要嘗試使用CSS的position屬性。這將使您能夠更好地控制您的元素。

您需要使用的兩個位置屬性是absoluterelative

基本上,如果您的div設置爲position: relative,這意味着您可以在不更改網頁佈局的情況下調整div的位置。這也意味着divposition: absolute的任何子元素都可以定位在relativediv的任何位置。

.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>