-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 に答える