bottom
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
試してみましょう
bottom
の効果は、要素がどの様に配置されているか(つまり、 position
プロパティの値)によって変わります。
position
がabsolute
またはfixed
に設定されている場合、bottom
プロパティは要素の下マージンの外側の辺と、包含ブロックの下パディングの外側の辺との間の距離を指定します。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
プロパティは無視されます。
構文
/* <length> 値 */
bottom: 3px;
bottom: 2.4em;
/* 包含ブロックの高さに対する <percentage> */
bottom: 10%;
/* キーワード値 */
bottom: auto;
/* グローバル値 */
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;
値
<length>
-
負、null、または正の
<length>
で、以下のものを表します。- 絶対位置指定要素の場合は、包含ブロックの下辺までの距離。
- 相対位置指定要素の場合は、通常の位置からの上方向への移動量。
<percentage>
-
包含ブロックの高さに対する
<percentage>
です。 auto
-
以下のように指定します。
inherit
-
値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は
<length>
,<percentage>
, またはauto
キーワードと同様に扱われます。
公式定義
形式定義
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 |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
例
絶対位置指定と固定位置指定
この例は、 position
が absolute
と fixed
であった場合の bottom
プロパティの動作の違いを示します。
HTML
<p>
This<br />is<br />some<br />tall,<br />tall,<br />tall,<br />tall,<br />tall<br />content.
</p>
<div class="fixed"><p>Fixed</p></div>
<div class="absolute"><p>Absolute</p></div>
CSS
p {
font-size: 30px;
line-height: 2em;
}
div {
width: 48%;
text-align: center;
background: rgba(55, 55, 55, 0.2);
border: 1px solid blue;
}
.absolute {
position: absolute;
bottom: 0;
left: 0;
}
.fixed {
position: fixed;
bottom: 0;
right: 0;
}
結果
仕様書
Specification |
---|
CSS Positioned Layout Module Level 3 # insets |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
inset
: 関連するすべてのプロパティであるtop
,bottom
,left
,right
の一括指定- 対応する論理的プロパティ:
inset-block-start
,inset-block-end
,inset-inline-start
,inset-inline-end
および一括指定のinset-block
とinset-inline
position