0

出于某种原因，我遇到了这个奇怪的 CSS 问题，但我不知道如何解决它。我正在使用 Materialize CSS 框架。当页面加载时，视差元素奇怪地出现在页面顶部。当用户滚动时它会消失。这是我的意思的图片：

http://i.stack.imgur.com/ExRPq.png

有任何想法吗？这是代码：

  .main-container {
      height: 88vh;
      width: 100%;
      padding: 0;
      margin: 0;
      display: -webkit-flex;
      -webkit-flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 200;
      font-family: Lato;
  }

  .main-container h1 {
    margin-bottom: -5px;
    margin-top: -15px;
  }

  .main-container h5 {
    margin-bottom: 20px;
    font-family: Roboto;
    font-weight: 200;
  }
  #search-box {
    height: 50px;
    width: 500px;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    resize: none;
  }

  @media screen and (max-width: 799px) {
      .parallax-dsp {display: none}
  }

这是HTML：

<nav class=" yellow darken-4" role="navigation">
  <div class="container">
    <div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">mxious</a>
      <ul id="nav-mobile" class="right side-nav">
        <li><a href="#"><b>Sign in</b> or <b>register &raquo;</b></a></li>
      </ul><a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    </div>
  </div>
</nav>

<div class="main-container">
<div class="parallax parallax-dsp"><img class="parallax-dsp" src="https://ununsplash.imgix.net/36/X7L5hgFXQZazzPaK3goC_14084990857_88cabf3b6d_o.jpg?q=75&fm=jpg&s=d8812b80a08b8a04f4cf538f69a13b37"></div>
  <h1>welcome to <logo></logo></h1>
  <h5>Mxious is a social music discovery engine.</h5>
  <input id="search-box" placeholder="type an artist, song, or album name to begin">

提前致谢！

4

1 回答 1

0

从您的图片中，我假设您希望视差图像位于右侧下方nav？……我认为这是固定的。好吧，只需对 做 a margin-top:，main-container它就会将它放在nav.

另一种方法可能是在div class="top-fill"上面添加一个新的main-container并使其高度为nav.

编辑：看起来我还没有回答你所有的问题，但我没有使用过那个框架，也没有使用过视差，所以我不知道如何解决这个消失的问题。

于 2015-01-31T23:35:16.427 回答