0

position: absolutedivとスクロールの間を交互にposition:fixed表示しています。壊れたコードはこちら (JSfiddle) で確認できます: http://jsfiddle.net/g9NVj/2/

問題の領域は、スクロールすると色が変わるピンクとブルーのボックスです。正しい幅と位置 (および私が望む結果) はピンク色のボックスで、青は壊れています。青いボックス ( .fix) が変更されposition:fixed、ウィンドウの一番左に収まるように見え、親を使用する代わりに (メニュー サイドバーの後ろに) 幅が異なります。

position:relative を親に追加しようとしましたが、問題は解決しません。

以下はフィドルの主要部分の抜粋ですが、完全なコードについては JSFiddle を確認してください。

.content {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #CCD5D5;
}

.c-2 {
    width: 50%;
    min-height:1px;
    float:left;
    overflow: hidden;
    /*position: relative;  TRIED THIS BUT DOESN"T WORK */
}

.c-2.last {
    padding: 80px;
}

.sticky {
    z-index: -1;
    background: #e4f;
}

.fix {
    position:fixed;
    width:50%;
    top: 0;
    left: 0;
    background: #34e;
}

.abs {
    position:absolute;
    bottom:0;
    width:50%;
    left:0;
    background: #e4f;
}
4

1 に答える 1

1

これはposition:fixed、ブラウザー ウィンドウに相対的であるためposition:relative、親に追加してdivも役に立たないためです。.fix div親に相対的なものが必要な場合divは、それに aposition:absoluteを指定し、親にdivaを指定する必要がありますposition:relative。

于 2013-11-04T11:05:17.153 に答える