WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > bottom
bottom  配置 

下からの位置を指定。

このエントリーをはてなブックマークに追加

positionプロパティが未指定・staticの場合は動作しません。
position:relarive; などにしてください。


パラメーター

●auto
 自動設定(初期値)。
●数値で指定
 数値にpxなどの単位をつけて指定。
●%で指定
 親ブロックとの割合から%で指定

サンプルコード position:relative;を指定

<div style="position:relative;bottom:10px;left:10px;">bottom:10px;left:10px;</div>
<div style="position:relative;bottom:20px;left:20px;">bottom:20px;left:20px;</div>
<div style="position:relative;bottom:20px;left:20px;">bottom:20px;left:20px;</div>
bottom:10px;left:10px;
bottom:20px;left:20px;
bottom:20px;left:20px;


サンプルコード position:relative;を指定

<div style="position:relative;bottom:10px;left:10px;">bottom:10px;left:10px;</div>
<div style="position:relative;bottom:20px;left:20px;">bottom:20px;left:20px;</div>
<div style="position:relative;bottom:20px;left:20px;">bottom:20px;left:20px;</div>
bottom:10px;left:10px; bottom:20px;left:20px; bottom:20px;left:20px;


positionの値が未指定・staticの場合

<div style="position:static;bottom:10px;left:10px;">bottom:10px;left:10px;</div>
<div style="position:static;bottom:20px;left:20px;">bottom:20px;left:20px;</div>
bottom:10px;left:10px;
bottom:20px;left:20px;


<div style=";bottom:10px;left:10px;">bottom:10px;left:10px;</div>
<div style="bottom:20px;left:20px;">bottom:20px;left:20px;</div>
bottom:10px;left:10px;
bottom:20px;left:20px;