Question

我正在建立一个具有水平视差滚动的网站。但是，由于一些奇怪的原因，我无法在第一张幻灯片上获取文本（我试图在单击顶部的“主页”按钮后显示在它滚动到的页面上的单词Home）以显示。对于所有其他页面，除了第一个之外，所有单词都出现。我在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

Answer 1

为您的容器定义了一个-1的z-index，删除它，你应该没问题

div#transition-slide-container {
    /* z-index: -1; remove this */
}

Answer 2

删除

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;
}

文本不会显示在页面HTML的一部分上

2 个答案: