トップページの中の プロパティの中の Bのプロパティ一覧の中の bottom

bottom

  • 最終更新:2009年11月 8日 15:24

bottomプロパティは、位置指定されている要素(positionプロパティの値がstatic以外の要素)を下辺からどの位置に配置するかを指定します。
その為、単体で使用する事は無く、positionプロパティと併せて使用します。

尚、topプロパティと競合した場合は、bottomプロパティは無視されます。

対応ブラウザ
  • IE6対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

プロパティの解説

<パーセント>|<長さ>|auto|inherit
初期値
auto
適用される要素
位置指定されている要素
継承
しません
パーセント値
包含ブロックの高さに対する割合
メディア
visual

bottomのサンプル

.item {
  position: relative;
  height: 100px;
  margin: 30px 10px;
  background: #333;
}

.item img {
  position: absolute;
  bottom: 10px;
}
<div class="item">
<img src="/img/bnr/css-happylife.gif" alt="CSS HappyLife" />
</div>

.itemを基点にして、img要素を下辺から10pxの位置に表示しています。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示
CSS HappyLife

このページの上部へ