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