CSSリファレンス
実践向けCSSリファレンス

基準位置の上からの距離を指定する

CSS - top

概要

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>

この位置指定の種類をまとめると以下の4つになります。基本的には、上下と左右をそれぞれ1つづつ指定することになります。

  • 上からの距離: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>

仕様書

関連CSSプロパティ

閉じる