web-dev-qa-db-ja.com

divを別のdiv内に絶対位置に配置する方法は？

たとえば、下の画像のようなテンプレートを作成したいと思います。

http://i.imgur.com/OneRsMw.png

コンテナ内の各divを絶対位置にどのように配置しますか？ float属性を使用する必要はありません。短い例はありがたいです。

csscss3css-position
18
Stybos

absoluteおよびrelativeポジショニングを使用できます。

例えば

html

<div id="container" class="box">
    <div class="box top left"></div>
    <div class="box top center"></div>
    <div class="box top right"></div>

    <div class="box middle left"></div>
    <div class="box middle center"></div>
    <div class="box middle right"></div>

    <div class="box bottom left"></div>
    <div class="box bottom center"></div>
    <div class="box bottom right"></div>
</div>

css

#container{
    width:200px;
    height:200px;
    position:relative;
    border:1px solid black;
}
.box{
    border:1px solid red;
    position:absolute;
    width:20px;
    height:20px;    
}

.top{top:0}
.middle{top:50%;margin-top:-10px;/*half of the .box height*/}
.bottom{bottom:0}

.left{left:0;}
.center{left:50%;margin-left:-10px;/*half of the .box width*/}
.right{right:0;}

デモ（） http://jsfiddle.net/gaby/MB4Fd/1/

（もちろん、上/左/右/下の値を変更することにより、実際の配置を好みに合わせて調整できます）

33
Gabriele Petrioli

使用する position: relative;コンテナ（_<div>すべてのコンテンツを含む）および子要素を絶対に配置します。コンテナ内の子要素はコンテナに対して相対的に配置されるため、必要に応じてすべてを簡単にレイアウトできます。

ただし、、ほとんどの状況でポジショニングを使用してサイトをレイアウトすることは悪い習慣と見なされます..に、あなたはさまざまなブラウザ間ではるかに一貫性を持つことになります。

フロートについて混乱している場合は、 this の記事を読んでください

6
Adrift