ITコラム

HOMEPAGE Global Address Browser Internet Website Design Software

ITコラム

2017.05.22

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

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>

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.