Question

我遇到了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;
    }

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

基本上，主要图像的z-index为5，箭头图像应位于幻灯片前面，z-index为15.但是，导航箭头会使幻灯片图像向右移动以腾出空间对他们来说发生了什么事？

Answer 1

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

z-index问题 - 相对位置

1 个答案: