概要
CSSプロパティ｢top｣は、要素の配置方法を設定するプロパティ position でstatic以外の値を指定した際に、その要素の基準位置の上からの距離を指定します。
幅300px,高さ200pxの要素の中でtop: 10px;を指定しているので、上端が上から10pxの距離のところに表示されました。
<div>
<p class="top">top：10pxを指定した要素</p>
</div>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 300px;
height: 200px;
border: 1px solid #000;
background-color: #dee;
position: relative;
}
p {
border: 1px solid #000;
background-color: #def;
width: 280px;
position: absolute;
}
.top {
top: 10px;
}
</style>この位置指定の種類をまとめると以下の４つになります。基本的には、上下と左右をそれぞれ１つづつ指定することになります。
- 上からの距離：top
- 左からの距離：left
- 下からの距離：bottom
- 右からの距離：right
値
| 値 | 説明 |
|---|---|
| length | pxやem, パーセント。マイナス値の指定可能 |
| auto | 初期値。自動的に設定されます。 |
使用例
ボタンを押すと、要素が移動します。ポイントは、top要素がfocusされたときのtopプロパティの値を変更しているところです。button要素以外のところクリックしてみてください。focusが外れると元の位置に戻ります。
<div>
<button>クリックすると要素の位置が変わります</button>
<p class="top">top：50pxを指定した要素</p>
</div>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 300px;
height: 200px;
border: 1px solid #000;
background-color: #dee;
position: relative;
}
p {
border: 1px solid #000;
background-color: #def;
width: 280px;
position: absolute;
}
button {
background: #eef;
border: 1px solid #ddd;
padding: 8px;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
margin: 5px;
}
.top {
top: 50px;
}
button:focus + .top {
transition: 1s;
top: 100px;
}
</style>