是否可以在幻燈片上設置永久圖像

Question

這是幻燈片放映元素。

<div id="slideshow"> 

      <img src="<?echo $image1; ?>" alt="" class="active" /> 
      <img src="<?echo $image2; ?>" alt="" class="active" /> 
      <img src="<?echo $image3; ?>" alt="" class="active" /> 
      <img src="<?echo $image4; ?>" alt="" class="active" /> 
      <img src="<?echo $image5; ?>" alt="" class="active" /> 

</div> 

我想在<div id="business_logo">上坐在上面的這個JS添加幻燈片。我能用z-index做些什麼嗎？或者是，redeundant當談到幻燈片...

的想法是坐是一個公司坐在他們的公司圖像的幻燈片頂部的標誌......

Answer 1

嘗試......

#slideshow {position: relative;} 
 
.sticky-logo { 
 
    position: absolute; 
 
    top: 5%; 
 
    left: 5%; 
 
    z-index: 9999999; 
 
}

<div id="slideshow"> 
 
    
 
    <div class="sticky-logo">IMAGE HERE</div> 
 

 
      <img src="<?echo $image1; ?>" alt="" class="active" /> 
 
      <img src="<?echo $image2; ?>" alt="" class="active" /> 
 
      <img src="<?echo $image3; ?>" alt="" class="active" /> 
 
      <img src="<?echo $image4; ?>" alt="" class="active" /> 
 
      <img src="<?echo $image5; ?>" alt="" class="active" /> 
 

 
</div>

Answer 2

<div id="slideshowContainer"> 
    <div id="slideshow"> 
     <img src="<?echo $image1; ?>" alt="" class="active" /> 
     <img src="<?echo $image2; ?>" alt="" class="active" /> 
     <img src="<?echo $image3; ?>" alt="" class="active" /> 
     <img src="<?echo $image4; ?>" alt="" class="active" /> 
     <img src="<?echo $image5; ?>" alt="" class="active" /> 
    </div> 
    <div id="slideshowLogo"><img src="" alt="" /></div> 
</div> 

CSS：

#slideshowContainer {position: relative;} 
#sslideshowLogo {position: absolute; top: 15px; right: 15px;} 

這使您的幻燈片結構保持不變，因此您的腳本不需要更改。

Answer 3

這個怎麼樣？

.container { 
 
    position: relative; 
 
} 
 
#business-logo { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    padding: 10px; 
 
    background-color: #fff; 
 
}

<div class="container"> 
 

 
    <div id="business-logo">My Logo</div> 
 

 
    <div id="slideshow"> 
 

 
    <img src="http://lorempixel.com/500/200/" alt="" class="active" /> 
 

 
    </div> 
 

 
</div>