行滚动并隐藏在

Question

我有两行，顶部包含文字，下面的一行包含一组卡片。是否可以让卡片在文字下方滚动，以便它们不再可见？

<div id="main-container" class="container">
  <div id="title-row-small" class="row">
    <div class="container center">
      <div class="show-on-small-only hide-on-med-and-up">
        <p id="title-text">Scott and Viki</p>
        <p id="date-text">23/06/18</p>
      </div>
    </div>
  </div>
  <div id="card-row" class="row">
    <div class="col s12 m6 l4">
      <a href="#" onclick="$('#agenda-modal').modal('open');">
        <div class="card">
        <div class="card-image">
          <img src="./assets/SVSunset.jpg">
          <span id="card-title" class="card-title">Agenda</span>
        </div>
      </div>
      </a>
    </div>
  </div>
</div>

我添加的少量CSS允许卡片在下方滚动，但它们不再位于文本y位置，文本不再居中并且缩放正确，我不知道如何制作卡片在文本后面消失了。

  #card-row {
    top: 0;
    position: relative;
  }

  #title-text {
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 80px;
    font-family: "Calling Angels Personal Use";
    text-shadow: 4px 4px 12px #fff;
  }

  #date-text {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 45px;
    font-family: "Strawberry Whipped Cream";
    text-shadow: 2px 2px 2px #fff;
  }

我将不胜感激任何帮助。我确信这是基本的，但我现在只是在学习，谷歌搜索并没有为你提供太多帮助。

由于