mozilla
Your Search Results

    bottom

    概要

    CSSbottom プロパティは 位置指定された要素 (positioned elements) の位置の指定に関わります。

    絶対位置指定要素position absolute または fixed である要素)では、要素のマージン境界の底辺と包含ブロックの底辺の距離を定義します。

    相対位置指定要素position relative である要素)では通常位置からの移動距離を定義します。

    しかしながら、top プロパティはその bottom プロパティを上書きします。相対位置指定要素では topauto でなければ、bottom の計算値は top の計算値に -1 を掛けたものになります。

    • 初期値auto
    • 適用対象位置指定された要素
    • 継承しない
    • 相対値の基準包含ブロックの高さ
    • メディアvisual
    • 計算値長さとして定義されると相当する絶対的な長さ、パーセンテージで定義されると指定どおりの値、それ以外は auto
    • アニメーションの可否長さ、パーセンテージ、calc() として可能。両方の値が長さであれば、長さとして補間。両方がパーセンテージならパーセンテージとして補間。それ以外では両方の値は長さとパーセンテージの合計(それぞれゼロの可能性があります)を表す calc() 関数に変換されます。これらの calc() 関数はそれぞれ、実数として補間結果を持っています。
    • 正規順序形式文法で定義される一意のあいまいでない順序

    構文

    形式文法: <length> | <percentage> | auto
    
    bottom: 3px         /* <length> 値 */
    bottom: 2.4em
    
    bottom: 10%         /* 包含ブロックの高さの <percentages> */
    
    bottom: auto
    
    bottom: inherit
    

    <length>
    次の意味を持つ負、null、または正の <length> です:
    • 絶対位置指定要素 に対しては包含ブロックの底辺までの距離
    • 相対位置指定要素 に対しては、位置指定がされなかった場合の通常フローによる位置からの移動距離
    <percentage>
    包含ブロックの高さに対する <割合> で、概要にあるような使い方をします。
    auto
    次の意味を持つキーワードです:
    • 絶対位置指定要素に対しては、top プロパティを基準にした位置。height: auto をコンテンツを基準にした高さとみなします
    • 相対位置指定要素に対しては、元々の位置からの top プロパティを基準にした距離。topauto である場合は移動しません
    inherit
    値が、親要素(包含ブロックではないかもしれません)からの計算値であることを示すキーワードです。そしてこの計算値は <length><割合> または auto キーワードであるかのように扱われます。

    element { 
        position: absolute;
        bottom: 20px; 
        height: 200px;
        border: 1px solid #000;
    }
    

    次のサンプルページでは position:absoluteposition:fixed を比較します。通常のテキストの高さがページの可視領域(ブラウザのウィンドウのビューポート)よりも高くなると、position:absolute の指定されたブロックはページとともにスクロールしますが、position:fixed の指定されたブロックはしません。

    <!DOCTYPE html>
    <html>
    <head>
    <title>Position at bottom, absolute or fixed</title>
    <style type="text/css">
    p {font-size:30px; line-height:3em;}
    div.pos {width:49%; text-align:center; border:2px solid #00f;}
    div#abs {position:absolute; bottom:0; left:0;}
    div#fix {position:fixed; bottom:0; right:0;}
    </style>
    </head>
    <body>
      <p>This<br>is<br>some<br>tall,<br>tall,
        <br>tall,<br>tall,<br>tall<br>content.</p>
      <div id="fix" class="pos"><p>Fixed</p></div>
      <div id="abs" class="pos"><p>Absolute</p></div>
    </body>
    </html>
    

    仕様書

    仕様書 策定状況 コメント
    CSS Level 2 (Revision 1) 勧告  

    ブラウザ実装状況

    機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本サポート 1.0 1.0 (1.7 or earlier) 5 6 1.0 (85)
    機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本サポート ? 1.0 (1.9.2) ? ? ?

    関連情報

    ドキュメントのタグと貢献者

    Contributors to this page: sosleepy, ethertank
    最終更新者: ethertank,
    サイドバーを隠す