css - CSS是否可以使滚动元素不显示在窗口的顶部

Question

很难解释，一张图片（在这种情况下是两张）值一千字。

我有

• 完整的图像背景，

• 带有导航栏的固定标题，下面用纯橙色表示，

• 下面以透明黄色表示的一些可滚动内容。

我希望可滚动元素不会显示在橙色条上方，因此它不会显示在屏幕的顶部 100px 中。这可以实现吗？

背景中的图像，即不是主体背景的图像，具有以下样式：

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0;
  left: 0;
}

Answer 1

http://jsfiddle.net/chrisdanek/TNRkY/1/看看这个小提琴

HTML 结构非常基本，我刚刚为内容添加了一个包装器。它有position :fixed，overflow: auto所以它允许内容滚动。

.bg { 
    position: fixed; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    background: #cfc; 
}
.toolbar { 
    position: fixed; 
    z-index: 100; 
    top: 100px; 
    left: 0; 
    right: 0; 
    height: 50px; 
    background: #fcc; 
}
.wrap { 
    position: fixed; 
    z-index: 50; 
    overflow: auto; 
    top: 150px; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}
.content { 
    background: #ffc; 
    margin-top: 50px; 
}