1

説明するのは難しいです、絵（この場合2つ）は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;
}

要素 望ましくない影響

4

1 に答える 1

0

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; 
}
于 2013-02-25T09:37:00.440 に答える