CSS - top, left, bottom, right

• トップ
• CSSリファレンス
• top, left, bottom, right

概要

属性名	top left bottom right
値	auto | <length> | <percentage>
初期値	auto
適用可能要素	ポジショニングされた要素
継承	継承しない
メディア	Visual
アニメーション	可能 (<length>, <percentage> の場合)

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS2	5.5	1.0	1.0	3.5	1.0

説明

上端、右端、下端、左端からの距離を指定します。position に absolute または relative を指定した要素に対して指定可能です。

値	説明
<length>	距離を長さで指定します。詳細は <length> を参照してください。
<percentage>	距離をパーセントで指定します。
auto	自動計算します。

使用例

下記の例では、position: relative を指定した要素を、親要素に対して右から 10px 下から 10px の位置に表示します。

.sample-canvas {
    position: relative;
    width: 200px;
    height: 100px;
    border: 1px solid gray;
}
.sample-box {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

<div class="sample-canvas">
 <img src="../image/back.gif" alt="" class="sample-box">
</div>

関連項目

position, top, right, bottom, left, z-index

リンク

• http://www.w3.org/TR/css3-positioning/#box-offsets-trbl
• http://momdo.github.io/css2/visuren.html#position-props
• https://developer.mozilla.org/ja/docs/Web/CSS/top
• http://caniuse.com/#search=css%202.1%20properties

---