top
試してみましょう
top
の効果は、要素がどの様に配置されているか(つまり、 position
プロパティの値)によって変わります。
position
がabsolute
またはfixed
に設定されている場合、top
プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。position
がrelative
に設定されている場合、top
プロパティは要素の上辺が通常位置から下方へ移動する量を指定します。position
がsticky
に設定されている場合、top
プロパティは粘着制約矩形の計算に使用されます。position
がstatic
に設定されている場合、top
プロパティは効果がありません。
top
と bottom
の両方が指定されている場合は、 3 つの異なる場合があります。
position
がabsolute
またはfixed
に設定されており、height
が指定されていない(auto
または100%
である)場合、top
およびbottom
の両方が尊重されます。position
がrelative
に設定されているか、height
が指定されている場合、top
プロパティが優先され、bottom
プロパティは無視されます。position
がsticky
に設定されている場合、top
とbottom
の両方の値が考慮されます。つまり、粘着位置指定要素は、要素の位置ボックスがそのブロック内に収まっている限り、これら 2 つのプロパティの値に基づいて、そのブロック内で上下に移動できる可能性があります。
構文
css
/* <length> 値 */
top: 3px;
top: 2.4em;
/* 包含ブロックの高さに対する <percentage> */
top: 10%;
/* キーワード値 */
top: auto;
/* グローバル値 */
top: inherit;
top: initial;
top: revert;
top: revert-layer;
top: unset;
値
<length>
-
負、null、または正の
<length>
で、以下のものを表します。- 絶対位置指定要素の場合は、包含ブロックの上辺までの距離。
- 相対位置指定要素の場合は、通常の位置からの下方向への移動量。
<percentage>
-
包含ブロックの高さに対する
<percentage>
です。 auto
-
以下のように指定します。
inherit
-
値が親要素(包含ブロックとは限りません)の計算値と同じであることを示すキーワードです。そして、この計算値は
<length>
,<percentage>
, またはauto
キーワードと同様に扱われます。
公式定義
形式文法
top =
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor()> =
anchor( <anchor-element>? &&
<anchor-side> , <length-percentage>? )
<anchor-size()> =
anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )
<anchor-element> =
<dashed-ident>
<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
例
位置指定要素を上から 10% に設定
css
body {
background: beige;
}
div {
position: absolute;
top: 10%;
right: 40%;
bottom: 20%;
left: 15%;
background: gold;
border: 1px solid blue;
}
html
<div>この内容の寸法は、辺の位置によって決まります。</div>
仕様書
Specification |
---|
CSS Positioned Layout Module Level 3 # insets |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
inset
: 関連するすべてのプロパティであるtop
,bottom
,left
,right
の一括指定- 対応する論理的プロパティ:
inset-block-start
,inset-block-end
,inset-inline-start
,inset-inline-end
および一括指定のinset-block
とinset-inline
position