CSS - top, left, bottom, right

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

概要

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

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS25.51.01.03.51.0

説明

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

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

使用例

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

CSS
.sample-canvas {
    position: relative;
    width: 200px;
    height: 100px;
    border: 1px solid gray;
}
.sample-box {
    position: absolute;
    bottom: 10px;
    right: 10px;
}
HTML
<div class="sample-canvas">
 <img src="../image/back.gif" alt="" class="sample-box">
</div>
表示

関連項目

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

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年11月22日
http://www.tohoho-web.com/css/prop/top.htm