CSS有可能使滚动元素不显示在窗口的顶部

Question

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

我有

• 全图像背景，

• 固定报头与在这里表示在下面的固体橙色导航栏，

• 在透明黄色这里表示如下一些滚动内容。

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

背景中的形象，这是一个形象不是身体的背景下，有以下样式：

#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; 
}