CSSリファレンス

実践向けCSSリファレンス

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

概要

CSSプロパティ「bottom」は、要素の配置方法を設定するプロパティ position でstatic以外の値を指定した際に、その要素の基準位置の下からの距離を指定します。

幅300px,高さ200pxの要素の中でbottom: 10px;を指定しているので、底辺が下から10pxの距離のところに表示されました。

<div>
<p class="bottom">bottom: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;
}

.bottom {
  bottom: 10px;
}
</style>

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

  • 上からの距離:top
  • 左からの距離:left
  • 下からの距離:bottom
  • 右からの距離:right

説明
length pxやem, パーセント。マイナス値の指定可能
auto 初期値。自動的に設定されます。

使用例

ボタンを押すと、要素が移動します。ポイントは、button要素がfocusされたときのbottomプロパティの値を変更しているところです。button要素以外のところクリックしてみてください。focusが外れると元の位置に戻ります。

<div>
  <button>クリックすると要素の位置が変わります</button>
  <p class="bottom">bottom: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;
}
button {
  background: #eef;
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  margin: 5px;
}
.bottom {
  bottom: 10px;
}
button:focus + .bottom {
  transition: 1s;
  bottom: 40px;
}
</style>

仕様書

関連CSSプロパティ

閉じる