html - 文本未显示在页面 HTML 的一部分

Question

我正在构建一个具有水平视差滚动功能的网站。但是，由于某些奇怪的原因，我无法在第一张幻灯片上显示文字(我试图让“主页”一词显示在您单击顶部的“主页”按钮后滚动到的页面上)以显示.对于所有其他页面，除了第一页没有出现外，所有的词都出现了。我已经在 J​​SFiddle ( 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 */
}