概要
CSS の top プロパティは、位置指定された要素 (positioned elements) の位置を定義します。位置指定されていない要素には効力を持ちません。
絶対位置指定要素（ position が absolute または fixed である要素）では、要素のマージン境界の上辺と包含ブロックの上辺の距離を定義します。
相対位置指定要素（ position が relative である要素）では、通常位置からの下方への移動量を定義します。
top と bottom の両方が定義されると、要素の位置は 過制約 (over-constrained) の状態になり、top プロパティが優先されます: bottom の計算値には -top がセットされ、指定した値は無視されます。
| 初期値 | auto |
|---|---|
| 適用対象 | 配置された要素 |
| 継承 | 不可 |
| 相対値の基準 | 包含ブロックの高さ |
| メディア | visual |
| 計算値 | 長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto |
| Animation type | 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 の定義 |
勧告 | 初回定義 |
ブラウザ実装状況
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 機能 | 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 |
|---|---|---|---|---|---|---|
| 基本サポート | ? | ? | ? | ? | ? | ? |
ドキュメントのタグと貢献者
タグ:
このページの貢献者:
SphinxKnight,
YuichiNukiyama,
Simplexible,
Prinz_Rana,
fscholz,
teoli,
ethertank,
sosleepy
最終更新者:
SphinxKnight,