0

これは例です、

右にdivを表示し.mappanelたいのですが、ブラウザの全幅をカバーしていることに注意してください 。.textview

position：relativeを削除すると、機能しました（position:relative両方のを削除することはできませんが）。

実際、私が欲しいのは.textview固定幅（私の例では380）を.mappanel取り、左を取ります。

そしてある時点で、.textview缶は崩壊し、それから.mappanelすべての幅を取ります

アップデート：

誰かが私に使用することを提案しますがz-index、私は使用できません。

を使用するz-indexと、.textviewが表示されるためです。しかし、それは.mappanelまた、親の幅全体を取りますが、私はそれがlefeスペースを取りたいだけです。

つまり、2つの要素の親divの幅が600pxの場合、.mappanelは（600-380）pxになります。

4

1 に答える 1

0

これはz-index問題です。パネル.textviewが の下に表示されます.mappanel。これは、positionそれらに を定義したためです。これにより、デフォルト が与えられますz-index。また、コードではが の.mappanel後に来るため、上に表示されます。.textview

これを試して：

CSS

.textview {
    width: 380px;
    position:relative;
    z-index: 1;
    top: 0px;
    float:right;
    height: 535px;
    background: #cc0000;
}
.mappanel {
    position:relative;
    z-index: 0;
    background: #0000cc;
    height: 535px;
    margin-right: 380px;
}

デモ

更新 1

非フロート パネルの幅がフロート パネルの下に入らないように修正するには、その右側にマージンを追加します。

    margin-right: 380px;

上記のデモを更新しましたので、ご覧になりたい方はご覧ください。

于 2012-12-20T00:30:24.183 に答える