8

ページの上部に固定配置の div があります。(例: Facebook) ページ内の相対的に配置された div。下にスクロールすると、相対 div が固定 div を通過しています。固定divの下を通過させたい。これを処理するアイデアはありますか?

ここに画像の説明を入力

#navcontainer
{
    position:fixed;
}

.city
{
    position:relative;
    float:left; 
}

.city .text 
{
    position:absolute;
    top:100px; 
    left:15px;
}

この css には都市の div があり、相対 div (.city) にある画像に絶対テキストが置かれています。

4

4 に答える 4

15

こんにちは、私はあなたがこれを行うべきだと思います：

CSS

#navcontainer
{
    position:fixed;
    background:red;
    left:0;
    right:0;
    top:0;
    height:100px;
    z-index:3;
}

.city
{
    position:relative; 
    background:green;
    left:0;
    right:0;
    padding:10px;
    top:100px;
    z-index:2;
}

.city .text 
{
    padding:10px;
    background:yellow;
}​

HTML

<div id="navcontainer">This is navigation</div>

<div class="city">
    <div class="text">here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br />here text <br /></div>
</div>
​

ライブデモhttp://jsfiddle.net/xLnKN/1/

于 2012-04-25T11:46:38.883 に答える
5

あなたが探しているのは CSS プロパティだと思いますz-index。ドキュメントについては、http: //reference.sitepoint.com/css/z-indexを参照してください。

CSS での使用方法を示す小さな例をまとめました: http://jsfiddle.net/B63Km/

基本的な考え方は、z-index が高いほど、要素があなたに近づくということです。

于 2012-04-24T18:38:16.833 に答える