スポンサード リンク
bottomプロパティ
要素に下からの表示位置を指定できます。positionプロパティといっしょに使います使い方(書式)
セレクタ { bottomプロパティ: 値; }
bottomプロパティ
対応ブラウザ | |
適用できる要素 | 全てのhtml要素 (positionプロパティも指定する) |
子要素へのスタイルの継承 | しない |
bottomプロパティの値 | 説明 |
単位 | px、emなどの単位 |
% | パーセンテージで指定。要素が表示できる幅に対しての割合 |
auto | ブラウザが自動で配置する |
positionプロパティの値 | bottomプロパティの基点 |
static | bottomプロパティで位置の指定はできない
staticは要素のレイアウトを独立させていないので位置指定はできないのです |
relative | 要素の元の位置を基点とした下からの位置 |
absolute | ページの下部を基点とした下からの位置 |
fixed | ブラウザの画面表示の下を基点とした下からの位置
fixedはIE6が未対応。※IE7から対応 |
実際の指定方法
.hogebox{ width: 600px; /* 親boxの幅 */ height: 350px; /* 親boxの高さ */ position: relative; /* 親boxをレイアウトから独立させる */ border: solid 1px; /* 枠線を表示 */ text-align: left; /* テキストを左寄せ */ margin: 20px auto ; /* 親boxを中央寄せ */ }
.hoge { position: static; /* 通常の要素の表示 */ border: solid 1px; /* 枠線を表示 */ }
.hoge2 { position: relative; /* 元の位置を基点として表示位置を指定 */ bottom:60px; /* 元の位置の下から60pxの位置に表示 */ border: solid 1px; /* 枠線を表示 */ }
.hoge3 { position: absolute; /* 親要素内で自由に配置 */ bottom:100px; /* 親要素の下から100pxの位置に表示 */ left:100px; /* 親要素の左から100pxの位置に表示 */ border: solid 1px; /* 枠線を表示 */ }
.hoge4 { position: fixed; /* 要素の位置を固定表示 */ bottom:20px; /* ブラウザの画面表示の下から20pxの位置に表示 */ left:10px; /* ブラウザの画面表示の左から10pxの位置に表示 */ border: solid 1px; /* 枠線を表示 */ }
html部分
<div class="hoge">position: static; 初期値です</div> <div class="hoge2">position: relative; bottom:60px;元の表示位置から60pxずらしました</div> <div class="hoge3">position: absolute; bottom:100px; left:100px; <br>親ブロック要素の左から100px、下から100pxの位置に配置 <br>親ブロック要素にposition: relative;を指定し、 <br>子ブロック要素にposition: absolute;を指定すると <br>親ブロック要素を基点にして子ブロック要素の位置を指定できます </div> <div class="hoge4"><img src="maru.gif" alt="" width="50" height="50"></div>
実際の表示
position: fixed;はページの左の画像を見ながらスクロールしてください