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

CSS - right

概要

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

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

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

.right {
  right: 30px;
}
</style>

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

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

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

使用例

画面の左右に配置されるページングを表示させてみます。これは画像のあるdiv要素を基準点として「前へ」には left プロパティを、 「次へ」には right プロパティを指定してあげます。

<div>
  <p>左右にページングを配置します</p>
  <ul>
    <li class="absolute left">< 前へ</li>
    <li class="absolute right">次へ ></li>
  </ul>
</div>
<style>
* {
  padding: 0;
  margin: 0;
}

div {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  position: relative;
  background: url('https://www-creators.com/wp-content/uploads/2017/11/food_sample.jpg') no-repeat 0 0;
  background-size: cover;
  text-align: center;
}
li {
  text-align: center;
  width: 50px;
  height: 28px;
  list-style: none;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 4px;
  padding: 5px;
}
.absolute {
  position: absolute;
  top: 50%;
  margin-top: -14px;
}
.left {
  left: 5px;
}
.right {
  right: 5px;
}
</style>

仕様書

関連CSSプロパティ