Question

我有一个网站，目前正在使用我想用jQuery Slider替换的Flash播放器（需要单个图像作为可点击链接）。有了这个，我在网上找到了一个简单的滑块实现，并对其进行了测试，并且它的工作非常完美。

当我用滑块替换Flash播放器时，滑块位于正确的位置，但下面的所有内容都向上移动并显示在滑块下方。

以下是它的外观简化版。笑脸是滑块上一个接一个出现的少数图像之一。 Lorem文本是以前在Flash播放器下面但现在已经向上移动的所有内容。 Lorem文本从Lorem Ipsum 1开始，但在屏幕上抓住第一个可见内容是Lorem Ipsum 9。 enter image description here

下面是用于幻灯片的CSS以及当前显示的HTML的简化版本 - HTML主要使用表格（它是我继承的一个非常古老的网站）。

我可以使用内容表格行的绝对定位来移动内容，但我不认为这是最好的解决方案。还有另一种方法可以将我的内容强制放在滑块下面吗？

我还将滑块放在自己的表中，但这也无济于事。

CSS

#slideshow {
    position:relative;
}

#slideshow A {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow A.active {
    z-index:10;
    opacity:1.0;
}

#slideshow A.last-active {
    z-index:9;
}

HTML

<body style="font-family: Arial, Sans-serif, sans;">
    <table>
        <tr>
            <td>
                <div id="slideshow">
                    <a href="#"><img src="images/slide-1.jpg" alt="Slideshow Image 1" /></a>
                    <a href="#"><img src="images/slide-2.jpg" alt="Slideshow Image 2" /></a>
                    <a href="#"><img src="images/slide-3.jpg" alt="Slideshow Image 3" /></a>
                    <a href="#"><img src="images/slide-4.jpg" alt="Slideshow Image 4" /></a>
                    <a href="#"><img src="images/slide-5.jpg" alt="Slideshow Image 5" /></a>
                    <a href="#"><img src="images/Untitled.jpg" alt="Slideshow Image 5" /></a>
                </div>
            </td>

        </tr>

        <tr>
            <td>
                <p>Lorem ipsum 1</p>
                <p>Lorem ipsum 2</p>
                <p>Lorem ipsum 3</p>
                <p>Lorem ipsum 4</p>
                <p>Lorem ipsum 5</p>
                <p>Lorem ipsum 6</p>
                <p>Lorem ipsum 7</p>
                <p>Lorem ipsum 8</p>
                <p>Lorem ipsum 9</p>
                <p>Lorem ipsum 10</p>
                <p>Lorem ipsum 11</p>
                <p>Lorem ipsum 12</p>
                <p>Lorem ipsum 13</p>
                <p>Lorem ipsum 14</p>
                <p>Lorem ipsum 15</p>
                <p>Lorem ipsum 16</p>
                <p>Lorem ipsum 17</p>
                <p>Lorem ipsum 18</p>
                <p>Lorem ipsum 19</p>
                <p>Lorem ipsum 20</p>
                <p>Lorem ipsum 21</p>
                <p>Lorem ipsum 22</p>
                <p>Lorem ipsum 23</p>
                <p>Lorem ipsum 24</p>
                <p>Lorem ipsum 25</p>
                <p>Lorem ipsum 26</p>
                <p>Lorem ipsum 27</p>
                <p>Lorem ipsum 28</p>
                <p>Lorem ipsum 29</p>
                <p>Lorem ipsum 30</p>
                <p>Lorem ipsum 31</p>
                <p>Lorem ipsum 32</p>
            </td>
        </tr>
    </table>
</body>

Answer 1

演示 - http://jsfiddle.net/victor_007/ohwbpa91/

为slideshow div

添加高度

#slideshow {
    position:relative;
    height:480px;
}

HTML jQuery滑块出现在内容之上

1 个答案: