1

私はこのフィドルを作成しました。赤い div が黄色の div のすぐ下に配置されることを期待しています。ではない。updivとdown相対の両方を配置するにはどうすればよいwrapperですか?

それは簡単だと思いますが、私はそれを機能させることができません。relative を使用する必要があると思います。「バー」はタイムラインであり、自由に「浮遊」します。

HTML:

<div class="wrapper" style="background:blue">
    <div class="up" style="background:yellow"/>
    <div class="down" style="background:red"/>
</div>

CSS:

.wrapper {
    width:50px;
    height:400px;
    background:blue;
    margin:1em;
}
.up {
    position:relative;
    top:100px;  /*I want this one 100px from the top of .wrapper*/
    height:100px;
}
.down {
    position:relative;
    top:200px;  /*I want this one 200px from the top of .wrapper*/
    height:50px;
}
4

2 に答える 2

4

position:relative前の に関連しdivます。

Div .upの高さは 100 ピクセルなので、.down を.upのすぐ下に配置するには、.down に を含める必要がありますtop:100px。したがって、top:200pxon .down は .up の 200px 下に配置しますが、.up の高さは 100px しかないため、これは望ましくありません。top.down の属性を に変更することで解決しますtop:100px

ラッパーに対して相対的に配置する場合は、 を使用しますposition:absolute。

デモ: http://jsfiddle.net/6wSAJ/274

于 2013-01-28T17:27:11.847 に答える
0

top:xx; を設定する必要はありません。黄色と赤を重ねるだけの場合は、HTML を「<div />」ではなく「<div></div>」の形式に変更します。

于 2013-01-28T17:40:58.600 に答える