文本不會顯示在頁面的一部分HTML

我正在構建一個具有水平視差滾動的網站。但是，出於某種奇怪的原因，我無法在第一張幻燈片上看到文字（我試圖讓單詞Home顯示在您點擊頂部的主頁按鈕後滾動到的頁面上）以顯示。對於所有其他頁面，除了第一頁外，所有字都會出現。我已經在JSFiddle（http://jsfiddle.net/LZfsV/）上試過這個，它顯示出來了，但不在頁面上。我試過用Firebug進行調試，Firebug告訴我文本應該顯示的區域在那裏，只是我看不到它。有任何想法嗎？謝謝！文本不會顯示在頁面的一部分HTML

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

來源

2013-07-14 Andrew

有-1的z-index爲您的容器定義，刪除它，你應該很好

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

來源

2013-07-14 08:19:33

1卸下

z-index: -1;

。你能解釋爲什麼嗎？ –

Z-index定義了元素在屏幕上出現層次的順序，負值表示元素將出現在「body」下面，並且由於主體具有堅實的背景色，它將覆蓋元素。至於爲什麼它隻影響第一個標籤，我的猜測是因爲其他元素首先渲染到視口之外，而瀏覽器沒有對它們應用z-index計算？ –

啊，明白了，謝謝！ – Andrew

從以下

div#transition-slide-container { 
    background: #bee1ff; 
    padding-top: 128px; 
    padding-bottom: 50px; 
    min-height: 100%; 
    width: 400%; 
    z-index: -1; 
    position: relative; 
}

來源

2013-07-14 08:21:45 user2580076

文本不會顯示在頁面的一部分HTML

回答

相關問題