0

位置が固定されているdiv(つまり) があります。div_fixedもう 1divつother_contentは の下にありdiv_fixedます。other_contentdiv にはプロパティpadding-topがあり、ページがスクロールされるother_contentと固定 div の下のみがスクロールされます。

フィドルはこちら

HTML :

<div class="div_fixed">FIXED</div>
<div class="other_content">
    content goes here<br/>
    content goes here<br/>
    content goes here<br/>
</div>

CSS:

     div { color: #fff }
        .div_fixed { position: fixed;  
    width: 100%; 
    height: 100px; 

    
    }

.other_content { 
background: #f00; 
height: 5000px; 
color: #fff; 
padding-top: 100px; 

margin:0 auto;

}

しかし、固定されていない div を固定 div にとどめ、固定されていない div が上端のすぐ下に消えるようにします。つまり、固定されていない div の上端の位置は固定されたままになりますが、ページのスクロール時にコンテンツが消え始めます。固定divの下にとどまっていたときに起こったのと同じように。

だから私は固定されていない div の前に html を少し編集しました (ちょうど 2 つの改行):

    <div class="div_fixed">FIXED</div>
<br><br/>
        <div class="other_content">
            content goes here<br/>
            content goes here<br/>
            content goes here<br/>
        </div>

css の追加は次のとおりです。

  .fixed_div{
    
    z-index:-1;
    }
    
    .other_content{
    
    
    width:60%;
    z-index:99099900;

    
    }

しかし、固定されていないdivの上端は、私が望む位置にとどまりません。

それを達成する方法は？

編集：

非固定の背景画像を追加するとしますdiv。div他のdivがスクロールする固定の背景画像の一部が、固定さ れていz-indexないものよりも高くなる可能性はありdivますか? 問題はそのように解決されますか？

EDIT2

fixed_divそれがヘッダーでother_contentあり、ウェブページのコンテンツ本体であると仮定してみましょう。dividでフッターを追加しましょうfooter。にスクロールはありませんother_content。other_contentページがスクロールされたときにスクロールする必要があります。

4

2 に答える 2

6

これがあなたが探しているものだと思います。固定 div をある方法で配置したいと思うでしょうfixedが、2 番目の div は特別な配置を必要としません。固定divの高さがmargin-top:100pxどこにあるかを指定するだけです。100px

トリックは、コンテンツdivを使用z-indexして追加することですposition:relative;

実際のデモ: http://jsfiddle.net/KyP8L/3/

.div_fixed{
    height:100px;
    width:100%;    
    position:fixed;
    top:0;
    left:0;
    background:#ff0;
    z-index:500;
}
.other_content {
    width:60%;    
    background:#0ff;
    margin-top:100px;
    z-index:600;
    position:relative;
}
​
​
于 2013-01-03T11:25:20.730 に答える
0

1つのオプションは、コンテンツdivを固定位置の別のコンテナーにラップすることです。

例えば：

HTML：

<div class="div_fixed">FIXED</div>
<div class="fixed_container">
    <div class="other_content">
        content goes here<br/>
        content goes here<br/>
        content goes here<br/>
    </div>
</div>

CSS：

.fixed_container {
    position: fixed;
    overflow: auto;
    top:30px;
    width: 100%;
    height: 5000px;
    z-index:10; }

.other_content { position: absolute; }

デモ： http： //jsfiddle.net/xmKMs/

于 2013-01-03T11:36:49.773 に答える