WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「基点からの距離」

bottom,left,right,top 「基点からの距離」

基点からの距離を「bottom」「left」「right」「top」で指定します。
「position」に、static以外を指定したときに、有効になります。
「bottom」は、基点から下端までの距離を指定します。
「left」は、基点から左端までの距離を指定します。
「right」は、基点から右端までの距離を指定します。
「top」は、基点から上端までの距離を指定します。

CSS Ver.適用要素継承
2.1positionを
指定した要素
しない
広告

bottom,left,right,top の指定方法

構文

bottom : length | auto;

lef : length | auto;

right : length | auto;

top : length | auto;

プロパティ/設定値意味
bottom: 100px;
bottom: auto;
基点から下端までの距離を値で指定
長さ・大きさの単位参照(以下も同様)
デフォルト:「タグ毎のスタイル初期値」を参照
left: 80%;
left: auto;
基点から左端までの距離を値で指定
デフォルト:「タグ毎のスタイル初期値」を参照
right: 20em;
right: auto;
基点から右端までの距離を値で指定
デフォルト:「タグ毎のスタイル初期値」を参照
top: 80px;
top: auto;
基点から上端までの距離を値で指定
デフォルト:「タグ毎のスタイル初期値」を参照
ページTOP

bottom,left,right,top のサンプル


<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css_top_left_px{
  position : relative;
  top     : 10px;
  left    : 20px;
}
.css_top_left{
  position : relative;
  top     : 10%;
  left    : 20%;
}
.css_bottom_right{
  position : relative;
  bottom  : 20%;
  right   : 10%;
}
.css_bottom_right_px{
  position : relative;
  bottom  : 20px;
  right   : 10px;
}

<!-- html -->
<div class="common">
  <div class="cssTitle">標準の位置に表示</div>
  <div>
  bottom,left,right,top 指定なし
  </div>

  <div class="cssTitle">標準の位置の<br>上から10px,左から20px移動</div>
  <div>
  <span class="css_top_left_px">
  top : 10px; left : 20px;
  </span>
  </div>

  <div class="cssTitle">標準の位置の上から親要素の10%,<br>左から親要素の20%移動</div>
  <div>
  <span class="css_top_left">
  top : 10%; left : 20%;
  </span>
  </div>

  <div class="cssTitle">標準の位置の下から親要素の20%,<br>右から親要素の10%移動</div>
  <div>
  <span class="css_bottom_right">
  top : 20%; right : 10%;
  </span>
  </div>

  <div class="cssTitle">標準の位置の<br>下から20px,右から10px移動</div>
  <div>
  <span class="css_bottom_right_px">
  top : 20px; right : 10px;
  </span>
  </div>
</div>
標準の位置に表示
bottom,left,right,top 指定なし
標準の位置の
上から10px,左から20px移動
top : 10px; left : 20px;
標準の位置の上から親要素の10%,
左から親要素の20%移動
top : 10%; left : 20%;
標準の位置の下から親要素の20%,
右から親要素の10%移動
top : 20%; right : 10%;
標準の位置の
下から20px,右から10px移動
top : 20px; right : 10px;

関連するCSSプロパティ

position要素の配置方法
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン