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>

我想添加一个位于此JS幻灯片放映之上的<div id="business_logo">。我能用z-index做些什么吗？或者说，在幻灯片演示中，这是多余的......

坐下来的想法是坐在公司图像幻灯片上的公司的标志......

Answer 1

试试这个......

＆＃13;

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

＆＃13;

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

＆＃13;

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>

是否可以在幻灯片放映之上设置永久图像

3 个答案: