CSS【 position 】 ~ 配置方法、基準位置、表示位置

HOMEPAGE Global Address Browser Internet Website Design Software Media WWW  Domain HTML Innovation Technology Homepage

positionプロパティは、HTML要素の配置方法(基準となる位置)を指定する際に使用するプロパティです。
HTML要素の表示位置は、positionプロパティで基準となる位置を指定した上で、top、 bottom、 left、 rightの各プロパティで基準となる位置からの距離を指定して決まります。
今回は、positionプロパティについてまとめたいと思います。

目次

 1.positionプロパティの値
 2.position: relative
 3.position: absolute
 4.position: fixed

1.positionプロパティの値

positionプロパティは、HTML要素の配置についての基準を指定するプロパティです。
その要素が本来あるべき位置を基準とする方法(相対位置)や、直接配置場所を決定して配置する方法(絶対位置)を指定することができます。

positionプロパティの値は、次の通りです。

static デフォルト値
配置方法や表示位置を指定せず、本来あるべき位置に表示
この値の場合は、top、bottom、left、rightの各プロパティは指定不可
relative 相対位置から配置を指定
position:staticと指定した場合に表示される位置(本来あるべき位置)が基準位置となる
absolute 絶対位置から配置を指定
親要素のpositionプロパティに、static以外の値が指定されている場合は、親要素の左上が基準位置となり、それ以外はウィンドウ全体の左上が基準位置となる
fixed 絶対位置から配置を指定し、画面をスクロールしても位置が固定されたままとなる

positionプロパティの値は、継承されません。
また、positionプロパティは、全ての要素で使用できます。

▲目次へ戻る

2.position: relative

positionプロパティにrelativeを指定すると、position:staticと指定した場合に表示される位置(その要素が本来あるべき位置)が基準位置となり、そこからtop、 bottom、 left、 rightの各プロパティで指定された距離だけ離れた位置に要素が表示されます。

div要素の中のp要素について、position: relativeのみを指定して、top、 bottom、 left、 rightの各プロパティをいずれも指定しないと、次のように表示されます。

position: relative;

 
ソースは次の通りです。

(CSS)
div#sample {
	height: 300px;
	padding: 5px;
	background-color: #AAA;}
 div#sample p {
	width: 200px;
	height: 100px;
	position: relative;
	background-color: #31A9EE;}

(HTML)
<div id="sample">
  <p>
    position: relative;
  </p>
</div>

position: relativeに加えて、topプロパティとleftプロパティを指定すると、次のようになります。

position: relative;
top:30px;
left:30px;

 
ソースは次の通りです。

(CSS)
div#sample {
	height: 300px;
	padding: 5px;
	background-color: #AAA;}
 div#sample p {
	width: 200px;
	height: 100px;
	position: relative;
	top:30px;
	left:30px;
	background-color: #31A9EE;}

(HTML)
<div id="sample">
  <p>
    position: relative;
    top:30px;
    left:30px;
  </p>
</div>

▲目次へ戻る

3.position: absolute

positionプロパティにabsoluteを指定すると、絶対位置によって配置が決定します。
親要素のpositionプロパティにstatic以外の値が指定されている場合は、親要素の左上が基準位置となり、それ以外はウィンドウ全体の左上が基準位置となります。

div要素にposition: relativeを指定して、その中のp要素にposition: absoluteを指定すると、次のような表示になります。

position: relative;(親要素にposition: static以外を指定)

position: absolute;
top:30px;
left:30px;

 
ソースは次の通りです。

(CSS)
div#sample {
	height: 300px;
	position: relative;
	padding: 5px;
	background-color: #AAA;}
 div#sample p {
	width: 200px;
	height: 100px;
	position: absolute;
	top:30px;
	left:30px;
	background-color: #FF9696;}

(HTML)
<div id="sample">
  position: relative;(親要素にposition: static以外を指定)
  <p>
    position: absolute;
    top:30px;
    left:30px;
  </p>
</div>

親要素にposition: staticを指定した場合やpositionプロパティの指定をしなかった場合は、ウィンドウ全体の左上が基準位置となるため、上の例ですと、div要素の表示位置から大きく離れて、ページのほぼ左上にp要素が表示されます。

▲目次へ戻る

4.position: fixed

positionプロパティにfixedを指定すると、absoluteの場合と同様に絶対位置の指定となり、かつ、画面をスクロールしても表示位置が固定されたままとなります。

このページの左下に、画面をスクロールしても表示位置が変わらないマークが確認できると思いますが、このマークはposition: fixedで指定しています。

ソースは次の通りです。

(CSS)
div#sample {
	position: fixed;
	bottom:30px;
	left:30px;
	color: #B20000;}

(HTML)
<div id="sample">
  ★
</div>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です