1

我正在建立一个具有水平视差滚动的网站。但是，由于某种奇怪的原因，我无法在第一张幻灯片上显示文本（我试图让 Home 一词显示在您单击顶部的 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

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 回答