CSS bottom| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

bottom CSS プロパティとは

トピック:参照要素のボックスまたはブラウザウィンドウの下部を基準にして、配置された要素の下端のオフセットを指定する ことができる

プロパティ bottom

実例 コード 1

サンプル コードを試す
  • p {
  •     position: absolute;
  •     bottom: 150px;
  • }
    情報:
  • 絶対 位置指定要素positionabsolute 又はfixedである要素)では、要素のマージン境界の底辺と包含ブロックの底辺の距離を定義する ことができる。
  • 相対 位置指定要素positionrelativeである要素)では、通常位置からの上方への移動量を定義する ことができる
  • topプロパティはbottomプロパティを上書きする。相対位置指定要素では top auto でなければ、bottom の計算値は top の計算値に -1 を掛けたものになる。

プロパティ 定義と使用法

デフォルト値・初期値 :auto
適用対象 :配置された要素
継承 :不可
相対値の基準 :包含ブロックの高さ
メディア :visual
CSS Version CSS2 ~
計算値 :長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
JavaScript 構文 object.style.bottom="funWebref"
アニメーションの種類 :length または percentage, calc();
正規順序 :形式文法で定義される一意のあいまいでない順序
CSSの構文bottom: auto | length | initial | inherit;

プロパティ値

説明
length(長さ)長さ値としてオフセットを指定しpx,pt,cm,emなど、負の長さの値が許可されています。
percentage(パーセント)オフセットをパーセンテージで指定する パーセンテージは、要素を含むブロックの高さに対して計算される 負のパーセント値は許可される
autoブラウザは、下端の位置を計算する これはデフォルト値です。
initialこのプロパティをデフォルト値に設定する
inherit親要素からこのプロパティを継承する

サポートするデスクトップ ブラウザ対応・互換性

機能ChromeFirefoxInternet ExplorerOperaSafari (WebKit)
基本サポート1.01.0 (1.7 or earlier)561.0 (85)

サポートするモバイル ブラウザ対応・互換性

機能AndroidFirefox MobileIE PhoneOpera MobileSafari Mobile
基本サポート不明1.0 (1.9.2)不明不明不明
bottom 関連記事
CSS bottom| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS bottom | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS