-1

我在 z-index 方面遇到了一些问题，我似乎无法解决。我已确保将相关位置属性设置为相对，但我的元素无法很好地发挥作用。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

</head>

<body>

<div class="container" id="top">
<h1>Top</h1>
    <div class="slideshow">
        <ul class="nav">
            <li class="prev"><a href="#">Previous</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>

        <ul class="slides" id="slides">
            <li><img src="images/top_blue.gif" alt="Harley Davidson Sportster" /></li>
            <li><img src="images/top_brown.gif" alt="Harley Davidson Sportster" /></li>
            <li><img src="images/top_vanilla.gif" alt="Harley Davidson Sportster" /></li>
        </ul>
    </div>


</div>


</body>
</html>

这里是我的 CSS：

body, h1, ul, li {
    margin: 0; padding: 0; border: 0;
}

.container {
    width: 800px; margin: auto;
    position: relative;
}

.slideshow {
    width: 800px; height: 50px;
    position: relative;
}

.slideshow ul.nav {
    list-style: none;
    position: relative;
    z-index: 100;
}
    .slideshow ul.nav li.prev {
        float: left;
        }
    .slideshow ul.nav li.next {
        float: right;
    }
    .slideshow ul.nav li a {
        display: block; width: 32px; height: 48px; text-indent: -9999px;
    }
        .slideshow ul.nav li.prev a {
            background: url(images/arrow_prev.gif);
        }
        .slideshow ul.nav li.next a {
            background: url(images/arrow_next.gif);
        }

    .slideshow ul.slides {
        list-style: none;
        position: relative;
        top:0px;
        height:50px;
    }

​​</p>

这是我的 JSFiddle：http: //jsfiddle.net/XPsn7/1/

基本上，下面的主图像的 z-index 为 5，箭头图像应位于幻灯片的前面，z-index 为 15。但是，导航箭头会导致幻灯片图像向右移动以为它们腾出空间。这是怎么回事？

4

1 回答 1

0

问题是你的相对定位。如果您创建一个包含绝对定位的子元素的相对容器，您应该能够按预期浮动图像。

于 2012-11-14T15:31:16.573 回答