CSS图像z-index图像边框 - 使用图像框和两个导航按钮创建图像滑块

Question

我想创建一个带图像边框的图像滑块，并将图像更改为截图。

我的HTML

<div id="slideshow"><span class="control" 
        id="leftControl" style="display: none;">Move left</span> 
    <span class="control" id="leftControl"></span>
    <div id="slidesContainer" style="overflow: hidden;">
        <div id="slideInner" style="width: 3060px;">
            <div class="slide" style="float: left; width: 1020px;">
                <img src="/images/daf.png">
            </div>
            <div class="slide" style="float: left; width: 1020px;">
                <img src="/images/daf.png">
            </div>
            <div class="slide" style="float: left; width: 1020px;">
                3
            </div>
        </div>
    </div>
    <span class="control" id="rightControl"></span> 
    <div class="shadow_and_circles">
        <div class="sl1">
        </div>
        <div class="sl2">
        </div>
        <div class="sl1">
        </div>
    </div>
    <span class="control" id="rightControl">Move right</span>
</div>

您可以找到 the css at my fiddle 。我目前的结果如下所示

我错了什么？我已经设置了z-index，但我还必须做什么？

更新

我创建了a new fiddle

Answer 1

就像我在评论中所说，你的风格与内联CSS样式和链接类混淆了。此外，无需将所有容器放在absolute位置。

Here's your demo。这就是你要追求的吗？

<强> _ __ _ __ _ ___ 修改 __ _ 的__ _ __ _ __ _ ___

您似乎遇到了z-index个问题，所以我在不使用任何堆栈定位的情况下进行了演示。只需使用我在以下演示中包含的类。

<强> Demo without z-index