6

私は中央のdivを持っています。サブディビジョン（赤）は、中央のディビジョンとオーバーラップする必要があります。それはまったく問題ありません。

ここで、オーバーラップdiv（緑）に続くdivを垂直に正しく配置する必要があります（オーバーラップするdivの後）。では、絶対位置と相対位置を混在させる可能性はありますか？

これが私のコードです：

HTML：

<div id="container">
  blubb
    <div id="overlap">
        Content goes here.
    </div> 
    <div id="after">
        after.
    </div> 
</div>

CSS：

#container{
    width:100px;
    height:400px;
    background:#ccc;
    margin:0 auto;
}

#overlap{
    position:absolute;
    left:0;
    right:0;
    height:100px;
    background:red;
    color:white;
}

#after{
    position:relative;
    height:100px;
    background:green;
    color:white;
}

jsfiddleへのリンクもあります。

http://jsfiddle.net/XLfkn/

4

2 に答える 2

2

いいえ、CSSの最新バージョンにはこのようなものはありません。絶対的なポジショニングはすべてかゼロかです。何かを水平位置に絶対的に配置することはできませんが、垂直位置に配置することはできません。

ニーズに応じて、いくつかの選択肢があります。1つの方法は、単に「後」を「オーバーラップ」内に配置することです。

<div id="container">
  blubb
    <div id="overlap">
        Content goes here.
        <div id="after">
            after.
        </div> 
    </div> 
</div>

境界線と背景色を分ける必要がある場合は、「コンテンツはここにあります」をラップするだけです。次のような別のdivで：

<div id="container">
  blubb
    <div id="overlap">
        <div id="before">
            Content goes here.
        </div>
        <div id="after">
            after.
        </div> 
    </div> 
</div>

あなたは絶対に配置#overlapして持っている#beforeことができ、またはの#afterどちらfixedかrelativeです。一部はそのままで、背景などはに移動するように、基本的に#overlapスタイルを分割する必要があります。#overlap#before

于 2013-01-14T00:12:18.130 に答える
0

あなたの例では高さが固定されているので、同じ量overlapをオフセットすることができます：after

#after{
    position:relative;
    height:100px;
    background:green;
    color:white;
    margin-top:100px;
}

例： http： //jsfiddle.net/XLfkn/14/

もちろんoverlap、動的な高さになる場合、これは機能しません。

于 2013-01-14T00:20:33.720 に答える