bottom

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

完全な互換性情報を見る
もっと詳しく

bottom は CSS のプロパティで、位置指定要素の垂直位置の設定に関与します。このインセットプロパティは、位置指定されていない要素には効果がありません。

試してみましょう

bottom: 0;

bottom: 4em;

bottom: 10%;

bottom: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">これは絶対位置指定されています。</div>
    <p>
      まるで地球の表面から水が引き始めたかのように、通りは泥だらけで、ホルボーン通りを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

構文

css

/* <length> 値 */
bottom: 3px;
bottom: 2.4em;
bottom: calc(anchor(--my-anchor 50%) + 5px);
bottom: anchor-size(width);

/* 包含ブロックの高さに対する <percentage> */
bottom: 10%;

/* キーワード値 */
bottom: auto;

/* グローバル値 */
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;

値

<length>

負、null、または正の <length> で、以下のものを表します。

絶対位置指定要素の場合は、包含ブロックの下端までの距離を表します。
相対位置指定要素の場合は、通常の位置からの上方向への移動量を表します。
アンカー位置指定要素の場合は、anchor() 関数は、関連付けられたアンカー要素の上端または下端の位置を基準とした相対的な <length> 値に解決されます（詳細はインセットプロパティで anchor() 関数値を使用を参照）。また、anchor-size() 関数は、関連するアンカー要素の幅または高さに相対的な <length> 値に解決します（アンカーサイズに基づく要素の位置の設定を参照）。

<percentage>

包含ブロックの高さに対する <percentage> です。

auto

以下のように指定します。

絶対位置指定要素では、要素の位置は top プロパティに基づいて決まり、 height: auto は内容物の高さに基づいて決まります。また、 top も auto であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。
相対位置指定要素では、通常の位置から要素までの距離は top に基づきます。また、top も auto であった場合は、垂直方向には移動しません。

解説

bottom の効果は、要素がどの様に配置されているか（つまり、position プロパティの値）によって変わります。

position が absolute または fixed に設定されている場合、bottom プロパティは、要素の下マージンの外縁と、包含ブロックの下パディングの外縁との間の距離を指定します。または、位置指定要素の場合、値の中で anchor() 関数が使用されているときは、指定された <anchor-side> の辺からの相対位置を基準とします。bottom プロパティは、top、bottom、start、end、self-start、self-end、center、および <percentage> 値と互換性があります。
position が relative に設定されている場合、 bottom プロパティは要素の下辺が通常位置から上方向へ移動する量を指定します。
position が sticky に設定されている場合、 bottom プロパティは sticky 制約の矩形を計算するために使用されます。
position が static に設定されている場合、 bottom プロパティは効果がありません。

top と bottom の両方が指定されており、 position が absolute または fixed に設定されており、かつ height が未指定 (auto または 100% のどちらか) の場合は、 top と bottom の距離が尊重されます。それ以外の場合、 height が何らかの形で制約されていた場合、または position が relative に設定されていた場合は、 top プロパティが優先されて bottom プロパティは無視されます。

公式定義

初期値	`auto`
適用対象	位置指定要素
継承	なし
パーセント値	包含ブロックの高さに対する相対値
計算値	長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
アニメーションの種類	length またはパーセント値, calc();

形式文法

bottom = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |