1

水平視差スクロールを備えた Web サイトを構築しています。ただし、奇妙な理由で、最初のスライドのテキストを取得できません (上部の [ホーム] ボタンをクリックした後にスクロールするページに [ホーム] という単語が表示されるようにしようとしています)。 . 他のすべてのページでは、最初のページを除いてすべての単語が表示されます。私はこれを JSFiddle ( http://jsfiddle.net/LZfsV/ ) で試してみましたが、表示されますが、ページ自体には表示されません。Firebug でデバッグを試みましたが、Firebug は、テキストが表示されるはずの領域がそこにあると教えてくれました。何か案は？ありがとう！

HTML:

<div id="transition-slide-container">
<!--begin transition-slide-container-->
<div id="transition-slide">
    <div class="slide" id="home">
        <div id="inner-container">
             <h1>home</h1> 

        </div>
        <div class="center"></div>
    </div>
    <div class="slide" id="portfolio">
        <div id="inner-container">
             <h1>portfolio</h1>

        </div>
    </div>
    <div class="slide" id="about">
        <div id="inner-container">
            <h1>about</h1>
        </div>
    </div>
    <div class="slide" id="contact">
        <div id="inner-container">
             <h1>Contact</h1> 
        </div>
    </div>
</div>

CSS:

div#transition-slide-container {
    background: #bee1ff;
    padding-top: 128px;
    padding-bottom: 50px;
    min-height: 100%;
    width: 400%;
    z-index: -1;
    position: relative;
}
div#transition-slide {
    white-space: nowrap;
    left: 0;
}
.slide {
    display: inline-block;
    min-width: 24.999999%;
    margin: 0 auto;
    border-left: 1px #000 solid;
}
div#inner-container {
    max-width: 960px;
    text-align:center;
    margin: 0 auto;
    padding: 0;
}

ウェブサイト: http://andrewgu12.kodingen.com/#home

4

2 に答える 2

1

コンテナに -1 の z-index が定義されています。それを削除すれば問題ありません

div#transition-slide-container {
    /* z-index: -1; remove this */
}
于 2013-07-14T08:19:33.757 に答える
1

を取り外します

z-index: -1;

以下から

div#transition-slide-container {
    background: #bee1ff;
    padding-top: 128px;
    padding-bottom: 50px;
    min-height: 100%;
    width: 400%;
    z-index: -1;
    position: relative;
}
于 2013-07-14T08:21:45.380 に答える