概要
CSS の top プロパティは、位置指定された要素 (positioned elements) の位置を定義します。位置指定されていない要素には効力を持ちません。
絶対位置指定要素（ position が absolute または fixed である要素）では、要素のマージン境界の上辺と包含ブロックの上辺の距離を定義します。
相対位置指定要素（ position が relative である要素）では、通常位置からの下方への移動量を定義します。
top と bottom の両方が定義されると、要素の位置は 過制約 (over-constrained) の状態になり、top プロパティが優先されます: bottom の計算値には -top がセットされ、指定した値は無視されます。
| 初期値 | auto |
|---|---|
| 適用対象 | 配置された要素 |
| 継承 | 不可 |
| 相対値の基準 | 包含ブロックの高さ |
| メディア | visual |
| 計算値 | 長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto |
| アニメーションの可否 | 可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc(); |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
形式文法: <length> | <percentage> | auto
top: 3px /* <length> 値 */ top: 2.4em top: 10% /* 包含ブロックの高さに対する <percentages> */ top: auto top: inherit
値
<length>- 次の意味を持つ負、null、または正の
<length>:- 絶対位置指定要素 では包含ブロックの上辺までの距離
- 相対位置指定要素 では、位置指定されなかった場合に通常フローで位置する座標からの移動量。
<percentage>- 包含ブロックの高さに対する
<percentage>で、概要にあるような用途に使われます。 auto- 次の意味を持つキーワードです:
inherit- 値が親要素（包含ブロックではないかもしれません）からの計算値と同じであることを示すキーワードです。そして、この計算値は
<length>、<percentage>、もしくはautoキーワード であったかのように扱われます。
例
/* div操作が目的なら、body は px 単位でセットすることもできました */
body{
width: 100%;
height: 100%;
}
/* これで div の設定は % 単位で操作できます（body の w と h が セットされています） */
div {
position: absolute;
left: 15%;
top: 30%;
bottom: 30%;
width: 70%;
height: 40%;
text-align: left;
border: 3px rgb(0,0,0) solid;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
<title>Mozilla.org height top left width percentage CSS</title>
<style type="text/css">
/* The body could be set using px unit also for the div to operate */
body {
width: 100%;
height: 100%;
}
/* The div can now operate the settings with % unit (body w and h are set) */
div {
position: absolute;
left: 15%;
top: 30%;
bottom: 30%;
width: 70%;
height: 40%;
text-align: left;
border: 3px rgb(0,0,0) solid;
}
</style>
</head>
<body>
<center>
<div>
...Some content...
</div>
</center>
</body>
</html>
仕様書
| 仕様 | 策定状況 | コメント |
|---|---|---|
| CSS Transitions top の定義 |
草案 | top をアニメーション可能として定義 |
| CSS Level 2 (Revision 1) top の定義 |
勧告 | 初回定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | (有) | 1.0 (1.7 or earlier) | (有) | (有) | (有) |
| 機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| 基本サポート | ? | ? | ? | ? | ? | ? |