bottom

試してみましょう

bottom: 0; 

bottom: 4em; 

bottom: 10%; 

bottom: 20px; 

<section id="default-example"> <div class="example-container"> <div id="example-element">I am absolutely positioned.</div> <p> As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. </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; } 

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

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

• 絶対位置指定要素では、要素の位置は top プロパティに基づいて決まり、 height: auto は内容物の高さに基づいて決まります。また、 top も auto であった場合は、要素は垂直方向には静的要素が配置される場合と同様に配置されます。
• 相対位置指定要素では、通常の位置から要素までの距離は top に基づきます。また、 top も 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; } 

結果

仕様書

ブラウザーの互換性

関連情報

• inset: 関連するすべてのプロパティである top, bottom, left, right の一括指定
• 対応する論理的プロパティ: inset-block-start, inset-block-end, inset-inline-start, inset-inline-end および一括指定の inset-block と inset-inline
• position