HTML 屏幕的拆分布局，下面的内容不可见

如何解决HTML 屏幕的拆分布局，下面的内容不可见

我正在尝试使用 https://tympanus.net/codrops/2013/10/25/split-layout/ 创建拆分布局 但是，我无法看到拆分视图下方的内容。我可以滚动但看不到元素 ID“服务”的内容。我不会发布 CSS 以避免使其可读。 CSS 可以在上面的链接中找到。谢谢。

<div id="splitlayout" class="splitlayout">
      <div class="intro">
        <div class="side side-left">
          <header class="codropsheader clearfix">
            <span>Blueprint <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts,components,plugins and layouts with minimal style for easy adaption and usage,or simply for inspiration."></span></span>
            <h1>Split Layout</h1>
            <nav>
              <a href="http://tympanus.net/Blueprints/OnScrollEffectLayout/" class="bp-icon bp-icon-prev" data-info="prevIoUs Blueprint"><span>PrevIoUs Blueprint</span></a>
              <!--a href="" class="bp-icon bp-icon-next" data-info="next Blueprint"><span>Next Blueprint</span></a-->
              <a href="http://tympanus.net/codrops/?p=16693" class="bp-icon bp-icon-drop" data-info="back to the Codrops article"><span>back to the Codrops article</span></a>
              <a href="http://tympanus.net/codrops/category/blueprints/" class="bp-icon bp-icon-archive" data-info="Blueprints archive"><span>Go to the archive</span></a>
            </nav>
            <div class="demos">
              <a class="current" href="index.html">Effect 1</a>
              <a href="index2.html">Effect 2</a>
            </div>
          </header>
          <div class="intro-content">
            <div class="image-container">
              <img class="img-fluid" src ={% static "images/teacher-4.png" %} alt="alternative">
          </div> 
            <h1><span>Toby Blue </span><span>Web Designer</span></h1>
          </div>
          <div class="overlay"></div>
        </div>
        <div class="side side-right">
          <div class="intro-content">
            <div class="image-container">
              <img class="img-fluid" src ={% static "images/student-2.png" %} alt="alternative">
          </div> 
            <h1><span>Amy White </span><span>Web Developer</span></h1>
          </div>
          <div class="overlay"></div>
        </div>
      </div><!-- /intro -->
      <div class="page page-right">
        <div class="page-inner">
          <section>
           </section>
          <section>
            </section>
          <section>
           </section>
          <section>
           </section>
          <section>
            </section>
        </div><!-- /page-inner -->
      </div><!-- /page-right -->
      <div class="page page-left">
        <div class="page-inner">
          <section>
              </section>
          <section>
           </section>
          <section>
            </section>
          <section>
            </section>
        </div><!-- /page-inner -->
      </div><!-- /page-left -->
      <a href="#" class="back back-right" title="back to intro">&rarr;</a>
      <a href="#" class="back back-left" title="back to intro">&larr;</a>
    </div><!-- /splitlayout -->
  
<!-- Services -->
<div id="services" class="cards-1">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2>Create an eQuiz and schedule it in less than 1 minute.</h2>
                <p class="p-heading p-large">Now all you need are a few clicks and your students get an eQuiz</p>
            </div> <!-- end of col -->
        </div> <!-- end of row -->
        <div class="row">
            <div class="col-lg-12">

                <!-- Card -->
                <div class="card">
                    <img class="card-image" src ={% static "images/employee.svg" %} alt="alternative">
                    <div class="card-body">
                        <h4 class="card-title">Pick Difficulty & Topic</h4>
                        <p>The questions and quiz comes with a level of difficulty and spread across all chapters </p>
                    </div>
                </div>
                <!-- end of card -->

                <!-- Card -->
                <div class="card">
                    <img class="card-image" src ={% static "images/quiz-icon.svg" %} alt="alternative">
                    <div class="card-body">
                        <h4 class="card-title">Random Q&A</h4>
                        <p>Students get random questions and options from our huge pool of questions</p>
                    </div>
                </div>
                <!-- end of card -->

                <!-- Card -->
                <div class="card">
                    <img class="card-image" src ={% static "images/quiz-2.svg" %} alt="alternative">
                    <div class="card-body">
                        <h4 class="card-title">Different Options</h4>
                        <p> You can test students on MCQ,True/False & Essay Type Questions </p>
                    </div>
                </div>
                <!-- end of card -->
                
            </div> <!-- end of col -->
        </div> <!-- end of row -->
    </div> <!-- end of container -->
</div> <!-- end of cards-1 -->
<!-- end of services -->

解决方法

将 position: fixed; 上的 .side 更改为 position: absolute;。

.side {
    position: absolute;
    top: 0;
    z-index: 100;
    width: 50%;
    height: 100%;
    text-align: center;
    -webkit-backface-visibility: hidden;
}

在 Codepen 上检查它的操作：https://codepen.io/manaskhandelwal1/pen/YzpWvaZ