スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSのpositionを使用し位置を自由(下揃え右揃え等)に設定する

CSSでの表示配置を調整する際に使用する
「psotion」についてまとめてみました。

■positionは4つ
position:absolute; 絶対配置
position:relative; 相対配置
position:static; 通常配置(指定しない場合はこれ)
position:fixed; 固定配置(IE7以降で対応)

絶対配置とか相対配置とか意味がわからないという方もおわれるでしょう。
まずは図を見てください。

20140216.jpg


この図形はすべてdiv要素で作成しています。
ソースはこちら
<div id="base_yellow">
  <div id="orange"></div>
  <div id="pink"></div>
  <div id="blue"></div>
</div>


ベースとなるのが黄色の四角です。
いわゆる親の図形です。
この四角形のどの位置に配置させていくのかを設定していきます。
親の四角にはposition:relative;を指定します。

黄色い四角(div)のなかに図形を置くと通常は左上に配置されると思います。


絶対配置とは
元々ある場所に関係なく、ここ!と指定した場所に配置する。

相対配置とは
元々ある場所から指定した分だけ上下左右に移動(ずらす)させた位置に配置する。


簡単に言うとこんな感じでしょうか。

上下左右の設定
top  → 上辺から下にずらす数値
bottom →下辺から上にずらす数値
left →左辺から右にずらす数値
right →右辺から左にずらす数値


まずはオレンジの四角。
CSSの記述はこちら
#orange {
position: absolute;
right: 10px;
bottom: 10px;
background-color: #F60;
height: 20px;
width: 20px;
}

positionをabsoluteに設定し、右から10px、下から10pxの位置に配置します。
この時、通常置かれた場合の位置は考慮されません。

続いてピンクの四角。
CSSの記述はこちら
#pink {
background-color: #F6F;
position: relative;
top: 10px;
right: 5px;
height: 20px;
width: 20px;
}


positionをrelativeで設定し、通常置かれた位置から計算し
上から10px、右から5px移動させた位置に配置されています。
右から左に移動している為、黄色い図形を飛び出しているのがわかります。

最後にの四角。
CSSの記述はこちら
#blue {
background-color: #63F;
position: relative;
left: 10px;
height: 20px;
width: 20px;
}

positionをrelativeに設定し、すでに上にpinkが置かれている為
通常の位置はpinkの分だけ下にきている状態から
左に10px以上した位置に配置されています。
pinkは上から下に10px移動している為、少しかぶっている状態になります。






トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。