positionプロパティは、HTML要素の配置方法(基準となる位置)を指定する際に使用するプロパティです。
HTML要素の表示位置は、positionプロパティで基準となる位置を指定した上で、top、 bottom、 left、 rightの各プロパティで基準となる位置からの距離を指定して決まります。
今回は、positionプロパティについてまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
positionプロパティは、HTML要素の配置についての基準を指定するプロパティです。
その要素が本来あるべき位置を基準とする方法(相対位置)や、直接配置場所を決定して配置する方法(絶対位置)を指定することができます。
positionプロパティの値は、次の通りです。
static | デフォルト値 配置方法や表示位置を指定せず、本来あるべき位置に表示 この値の場合は、top、bottom、left、rightの各プロパティは指定不可 |
---|---|
relative | 相対位置から配置を指定 position:staticと指定した場合に表示される位置(本来あるべき位置)が基準位置となる |
absolute | 絶対位置から配置を指定 親要素のpositionプロパティに、static以外の値が指定されている場合は、親要素の左上が基準位置となり、それ以外はウィンドウ全体の左上が基準位置となる |
fixed | 絶対位置から配置を指定し、画面をスクロールしても位置が固定されたままとなる |
positionプロパティの値は、継承されません。
また、positionプロパティは、全ての要素で使用できます。
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>
positionプロパティにabsoluteを指定すると、絶対位置によって配置が決定します。
親要素のpositionプロパティにstatic以外の値が指定されている場合は、親要素の左上が基準位置となり、それ以外はウィンドウ全体の左上が基準位置となります。
div要素にposition: relativeを指定して、その中のp要素にposition: absoluteを指定すると、次のような表示になります。
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要素が表示されます。
positionプロパティにfixedを指定すると、absoluteの場合と同様に絶対位置の指定となり、かつ、画面をスクロールしても表示位置が固定されたままとなります。
このページの左下に、画面をスクロールしても表示位置が変わらない★マークが確認できると思いますが、この★マークはposition: fixedで指定しています。
ソースは次の通りです。
<!-- CSSファイル -->
div#sample {
position: fixed;
bottom:30px;
left:30px;
color: #B20000;}
<!-- HTMLファイル -->
<div id="sample">
★
</div>
INTERNOUS,inc. All rights reserved.