top：位置指定で配置された要素の上辺からの距離を指定する
| 初期値 | auto |
| 適用対象 | 位置指定された要素 |
| 継承 | しない |
| アニメーション | <length>値、<percentage>値、calc(); |
| 対応ブラウザ | caniuseで確認 |
topプロパティの説明
topは、位置指定された要素の包含ブロックの上辺からの距離を指定します。これは、対象となる要素にpositionが与えられており、かつその値がstatic以外の場合に有効となります。
この機能の振る舞いは位置指定の状態に影響を受けます。具体的な特徴は以下の通りです。
positionの値がabsoluteまたはfixedの場合、topは包含ブロックの上辺からの距離を決定しますpositionの値がrelativeの場合、topは元の位置から下へ移動する相対距離を表しますpositionの値がstickyの場合、topは粘着を開始するしきい値の計算に使われますpositionの値がstaticの場合、topは無効になります
位置指定に関するプロパティには以下のものがあり、これを複数組み合わせて使用します。
topに指定できる値
- auto
- 既定値に従います。
bottomが指定されていた場合は、その値が採用されます。 - <length>
- 包含ブロックの上辺との距離を数値と長さの単位で指定します。一般的にはpxやemを使用します。
- <percentage>
- 包含ブロックの高さに対する割合で配置位置を指定します。
topの使い方とサンプル
topプロパティの構文は以下の通りです。
/* キーワード値 */
top: auto;
/* <length>値 */
top: 10px;
top: -10px;
top: 1.8em;
top: 5vh;
/* <percentage>値 */
top: 10%;
top: -10%;
/* グローバル値 */
top: inherit;
top: initial;
top: revert;
top: unset;
topの実例
それでは実際にtopプロパティの書き方を見ていきましょう。位置指定の機能は、対象となる要素にpositionが与えられており、かつその値がstatic以外の場合に有効となります。加えて、positionの値に応じて位置指定の基準が変わるため、ここでは各値の挙動を分けて解説します。
positionの値がabsoluteの場合
positionプロパティの値がabsoluteの場合、topは自身の上辺と包含ブロックの上辺との距離を表します。位置指定の基準となる場所は、positionにstatic以外の値が指定された祖先のブロック要素です。
まず初めに、絶対位置の基準がどこにあるのか確認しておきましょう。以下の例は、10pxの境界線と10pxの余白を持つ親要素に、絶対位置の指定を行った子要素を配置したものです。親要素の背景色は、background-clipプロパティの値にcontent-boxを指定しているため、パディング・エリアは背後の色が透けて見える状態になっています。
子要素の配置は、それぞれ4つの角から10pxの距離を取った場所です。これを見ると、絶対位置の基準はコンテンツ・エリアの縁ではなく、パディング・エリアの縁であることが分かります。つまり、topの値を0にすると、包含ブロックの上辺にあたるパディング・エリアの外縁、ボーダー・エリアの内縁に密着します。
サンプルは、resizeに対応しているブラウザであれば、右下のハンドルを掴んでボックスのサイズ変更が可能です。
#samp_box {
overflow: auto;
width: 100%;
height: 300px;
padding: 20px;
background-color: #eee;
resize: both;
}
#samp_box > section {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
border: 10px solid #000;
background-color: #fff;
background-clip: content-box;
}
section > div {
position: absolute;
width: 50px;
background-color: #09f;
color: #fff;
text-align: center;
line-height: 50px;
}
#item_1 {
top: 10px;
left: 10px;
}
#item_2 {
top: 10px;
right: 10px;
}
#item_3 {
bottom: 10px;
right: 10px;
}
#item_4 {
bottom: 10px;
left: 10px;
}
<div id="samp_box">
<section>
<div id="item_1">1</div>
<div id="item_2">2</div>
<div id="item_3">3</div>
<div id="item_4">4</div>
</section>
</div>
以上の内容を踏まえて、絶対位置指定によるtopの挙動を見ていきます。位置指定の状態がabsoluteの場合、要素は通常のフローで配置された要素のレイアウトに影響を与えません。そのため、HTMLのマークアップの順序を気にすることなく、純粋に平面の移動距離によって配置を決定できます。
絶対位置指定で反対側の辺に要素を密着させたい場合は、無理にそのプロパティを使用せずに、対応するプロパティに変更しましょう。topであればbottomです。topに100%を指定すると、包含ブロックから完全にはみ出します。
#samp_box {
padding: 1rem;
background-color: #eee;
}
#samp_box > section {
overflow: auto;
position: relative;
width: 300px;
height: 200px;
margin: 0 auto;
background-color: #fff;
}
section > p {
margin: 1rem 0 0;
padding: 0 .5rem;
border-bottom: 1px solid #eee;
}
section > div {
position: absolute;
width: 50px;
color: #fff;
text-align: center;
line-height: 50px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
}
#item_1 {
top: 2rem;
left: 2rem;
background-color: #fc605b;
}
#item_2 {
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
background-color: #76fc5b;
}
#item_3 {
bottom: 0;
right: 0;
background-color: #5b96fc;
}
<div id="samp_box">
<section>
<p>通常のフローで配置された段落。</p>
<div id="item_1">1</div>
<div id="item_2">2</div>
<div id="item_3">3</div>
<p>通常のフローで配置された段落。</p>
</section>
</div>
positionの値がrelativeの場合
positionプロパティの値がrelativeの場合、topは自身が本来配置されるべき場所からの相対的な距離を表します。この機能によって要素が移動した場合でも、隣接する要素は元のレイアウトを維持します。
この機能は、ユーザーのアクションに対して何らかのフィードバックを与えたい時などに有効です。例えば、リンクされた要素をクリックした時に少しだけ位置を移動させることで、そのアクションが有効であることを明示できます。
#samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
}
#samp_box > section {
margin: 1rem 0 0;
padding: 1rem;
background-color: #fff;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 5px;
}
section label {
display: block;
background-color: #09f;
color: #fff;
text-align: center;
cursor: pointer;
}
input[type="radio"] {
display: none;
}
section > div {
text-align: center;
line-height: 50px;
border: 1px solid #333;
}
#target {
position: relative;
background-color: #f90;
color: #fff;
}
#move_lt:checked ~ #target {
top: -50%;
left: -50%;
}
#move_t:checked ~ #target {
top: -75%;
}
#move_rt:checked ~ #target {
top: -50%;
right: -50%;
}
#move_l:checked ~ #target {
left: -75%;
}
#move_n:checked ~ #target {
background-color: #999;
}
#move_r:checked ~ #target {
right: -75%;
}
#move_lb:checked ~ #target {
left: -50%;
bottom: -50%;
}
#move_b:checked ~ #target {
bottom: -75%;
}
#move_rb:checked ~ #target {
right: -50%;
bottom: -50%;
}
<div id="samp_box">
<section id="controller">
<label for="move_lt">左上</label>
<label for="move_t">上</label>
<label for="move_rt">右上</label>
<label for="move_l">左</label>
<label for="move_n">元位置</label>
<label for="move_r">右</label>
<label for="move_lb">左下</label>
<label for="move_b">下</label>
<label for="move_rb">右下</label>
</section>
<section id="item_box">
<!--=== 切り替えスイッチ ====-->
<input type="radio" name="s" id="move_lt">
<input type="radio" name="s" id="move_t">
<input type="radio" name="s" id="move_rt">
<input type="radio" name="s" id="move_l">
<input type="radio" name="s" id="move_n" checked>
<input type="radio" name="s" id="move_r">
<input type="radio" name="s" id="move_lb">
<input type="radio" name="s" id="move_b">
<input type="radio" name="s" id="move_rb">
<!--/=== 切り替えスイッチ ====-->
<div>static</div>
<div>static</div>
<div>static</div>
<div>static</div>
<div id="target">relative</div>
<div>static</div>
<div>static</div>
<div>static</div>
<div>static</div>
</section>
</div>
位置指定された要素が重なる順序
位置指定された要素が重なる場合は、カスケードの優先順位が高い方が手前に表示されます。このように奥行きのある表現は、z軸によって座標を管理します。要素の重なる順序を変更したい場合は、z-indexを使用して下さい。
以下の内容は、ソースコード上で後に書かれた内容が手前に重なって見える状況を確認するものです。
#samp_box {
position: relative;
height: 240px;
padding: 5px;
border: 1px solid #666;
}
div > div {
position: absolute;
min-width: 200px;
height: 100px;
padding: 5px;
border: 1px solid #999;
}
#item1 {
top: 30px;
left: 30px;
background-color: #ffcccc;
}
#item2 {
top: 100px;
left: 100px;
background-color: #ccccff;
}
<div id="samp_box">
samp_box
<div id="item1">
item1<br>
・top:30px;<br>
・left:30px;<br>
</div>
<div id="item2">
item2<br>
・top:100px;<br>
・left:100px;<br>
</div>
</div>