ホーム＞HTMLリファレンス（アルファベット検索）＞bottomプロパティ
bottom プロパティ …要素の下からの位置を指定する
使用プロパティ
 |
bottom: 値; |
対象となる
要素 |
position プロパティにより、位置が定められる要素 |
継承 |
しない
|
値 |
単位付きの長さ、% （パーセンテージ）
、auto （自動的に調整） |
 |
      |
 解説
 bottom プロパティを使えば、ボックスの下からの配置位置を指定することができます。このプロパティを使用する場合、必ず position プロパティで基準となる位置を設定する必要があります。配置位置を指定するプロパティは、bottom プロパティの他に、top、left、right プロパティがあります。
なお、値に「auto」を指定すると position プロパティを使用しない場合と同様に、自動的に配置されます。また、この「auto」が初期値です。
|
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
div {
width: 500px;
height: 300px;
background-color: coral;
position: absolute;
}
.sample1 {
position: absolute;
bottom: 50px;
right: 50px;
background-color: gray;
}
.sample2 {
position: absolute;
bottom: 150px;
right: 250px;
background-color: gold;
}
</style>
</head>
<!--ページの本文-->
<body>
<div>
<span class="sample1">親要素の左上を基準として、下から50px、右から50pxの位置に指定しています。</span>
<span class="sample2">親要素の左上を基準として、下から150px、右から250pxの位置に指定しています。</span>
</div>
</body>
|
|
[ブラウザでの表示例]
| HOME PAGE ZERO ガイド |
|
要素の左上を基準として、下から50px、右から50pxの位置に指定しています。
要素の左上を基準として、下から150px、右から250pxの位置に指定しています。
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
