0

cssポジショニングを理解しようとしています。私が達成しようとしているのは、div位置を設定したdiv後、最初divに移動した位置を重ならないように変更することです。例を作りましょう:

HTML

<div class="wrap">
    <div class="box1">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
</div>

CSS

.wrap{
    position: absolute;
    background-color:yellow;
    width:500px;
    height:600px;
    margin:0 auto;
}

.box1,.box2,.box3{
    position: relative;
    width:450px;
    height:150px;
    margin:0 auto;
}
.box1{background-color:red; top: 100px;}
.box2{background-color:green;}
.box3{background-color:blue;}

今、たとえばtop:100pxonbox1に設定すると100px、上から移動しますがbox2、box3まだそこにとどまります。topご覧のとおり、設定された位置divの変更に「苦しみ」、重なり合ったり、他のものと重なり合ったりしないようにしたいdivのですが、ご覧のposition: relativeとおり、目標に到達しませんでした。

もっとうまく説明できたらすみません、英語で説明するのは難しいです。

4

4 に答える 4

1

csstopプロパティは、位置を持つ要素でのみ使用できますabsolute(チャットで話されているように :-)。

相対的に配置された要素の場合、次のmargin-topようなプロパティを使用する必要があります。

.box1 {background-color:red; margin-top: 100px;}

ここに実用的なフィドルがあります：http://jsfiddle.net/IrvinDominin/eux4C/4/

于 2013-06-08T15:51:16.633 に答える