텍스트가 페이지 일부에 표시되지 않음 HTML

가로 시차 스크롤링 기능이있는 웹 사이트를 구축하고 있습니다. 그러나 몇 가지 이상한 이유로 첫 번째 슬라이드에 텍스트를 표시 할 수 없습니다 (맨 위에있는 홈 버튼을 클릭 한 후 스크롤하여 표시되는 단어에 홈을 표시하려고합니다). . 다른 모든 페이지의 경우 첫 단어가 아닌 단어가 모두 나타납니다. 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; 
}

웹 사이트 : 당신의 용기에 대해 정의 -1 Z- 인덱스, 그것은 당신을 제거 거기 http://andrewgu12.kodingen.com/#home

출처

2013-07-14 Andrew

괜찮을거야

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

출처

2013-07-14 08:19:33

일에서

z-index: -1;

를 제거합니다. 이유를 설명해 주시겠습니까? –

Z- 색인은 요소가 화면에 겹쳐서 나타나는 순서를 정의하고 음수 값은 요소가 body 아래에 표시됨을 의미하며 본문에는 단색 배경색이 있으므로 요소를 포함합니다. 첫 번째 탭에만 영향을주는 이유는 다른 요소가 먼저 뷰포트 외부에서 렌더링되고 브라우저가 Z- 인덱스 계산을 적용하지 않기 때문입니다. –

아, 고마워! – 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

답변

관련 문제