html - 内容在图像上滚动

Question

所以我有一个图像没有设置为背景，但占据了整个宽度和几乎所有的高度。我希望这张图片保持原位，当用户滚动时，下面的内容会滚动到图片顶部。

我尝试使用:

position: fixed;
z-index: -1; /* Or another value */

但两者均无效或一起无效。

我没有应用位置或 z-index 的内容:https://jsfiddle.net/hhcvmrfx/

我希望 div 容器出现在图像下方，并且仅在用户滚动时与图像重叠。

Answer 1

要仅在用户向下滚动时重叠下面的容器，您需要为您的父 .container 设置一个 padding-top 值，等于或小于固定高度图片有问题。
然后将背景颜色应用于嵌套的 div 元素。

body {
  padding: 0;
  margin: 0;
  background-color: #f7f7f7;
  overflow-x: hidden;
}

/* Images */
#head-banner-img {
  border-bottom: 5px solid #222222;
  position: fixed;
}

/* Container Content */
.container {
    width: 100%;
    height: 500px;
    background-color: transparent;
    padding-top: 947px;
    font-size: 30px;
    text-align: center;
    position: relative;
}

.container > div {
    background: #2c2c2c;
    height: 100%;
    padding: 50px;
    box-sizing: border-box;
    color: white;
}

<img src="http://www.thestoryboardz.com/images/background.jpg" alt="Munch Banner" id="head-banner-img">
    <div class="container">
      <div>Hello</div>
    </div>