[初心者向け徹底解説]CSSプロパティpotisionの使い方

CSSプロパティposition(static・relative・absolute・fixed)の基本的な使い方

 

CSSプロパティpositionは全部で4種類

CSSプロパティpositionの値は全部で下の4種類があって用途によって使い分けます。

static初期の配置
relative相対位置への配置
absolute絶対位置への配置
fixed 固定された絶対位置への配置

これだけ見たら何のことか全く分かりませんね。

CSSのプロパティは実際に色々書いてブラウザに表示させてみないとイメージしにくいものです。

ここでは、これら4種類の使い方を沢山の例を見ながら解説していきます。

staticの基本的な使い方

static(スタティック)は直訳すると「静的な・静止の」という意味になります。

CSSプロパティpositionでは「初期の配置」と表されることが多いです。

つまり、static特に位置を設定しない時に使用する値となります。

具体的な例を見ていきましょう。

staticの場合

HTML<div class="test1">
<p>ここはdiv要素にtest1というclass名を使用して背景色は黄色を指定しています。</p>
</div>
positionプロパティ無し.test1 {
border: 1px solid black;
width:200px;
height:150px;
background-color: yellow;
}
staticを指定した場合.test1 {
position: static;
border: 1px solid black;
width:200px;
height:150px;
background-color: yellow;
}

上の図をみて分かるように、staticを指定した場合、positionを指定しなかった時と同じ位置になります。

つまり、位置を動かす必要がないときはstaticを使用するか、そもそもpositionを指定しなくても良いということになります。

relativeの基本的な使い方

relative(レラティブ)は直訳すると「相対」という意味になります。

CSSプロパティpositionでは「相対位置」と表されることが多いです。

ここでいう相対位置とはpositionを指定しない場合(=staticを指定しない場合)を基準として、そこからどれくらい離れた位置にあるかということです。

具体的な例を見ていきましょう。

relativeを指定した場合

上の図はpositionプロパティで値をrelativeにしてtop50px、left100pxとした場合です。

基準点からそれぞれ距離がとられたことが分かりますね。

この場合のHTMLとCSSを見てみます。

HTML<div class="test1">
<p>positionをrelativeに指定してtop50px、left100pxの位置</p>
</div>
CSS.test1 {
position: relative;
top: 50px;
left: 100px;
border: 1px solid black;
width:200px;
height:150px;
background-color: yellow;
}

absoluteの基本的な使い方

absolute(アブソリュート)は直訳すると「絶対の」という意味になります。

CSSプロパティpositionでは「絶対位置」と表されることが多いです。

ここでいう絶対位置とは親要素を基準としてそこからどれくらい離れた位置にあるかということです。

具体的な例を見ていきましょう。

absoluteの場合

上の図は親要素を基準点としてtop30px、left50pxとした場合です。

基準点からそれぞれ距離がとられたことが分かりますね。

この場合のHTMLとCSSを見てみます。

HTML<div class="test1">
<p>positionをrelativeに指定してtop50px、left100pxの位置</p>
<div class="test2">
<p>positionをabsoluteに指定してtop30px、left50pxの位置</p>
</div>
</div>
CSS.test1 {
position: relative;
top: 50px;
left: 100px;
border: 1px solid black;
width:200px;
height:150px;
background-color: yellow;
}
.test2 {
position: absolute;
top: 30px;
left: 50px;
border: 1px solid black;
width:200px;
height:150px;
background-color: red;
}

実際のエディタ画面はどのようになるかというと↓↓↓のようになります。
relativeとabsoluteの比較

absoluteを使用して複数のBOXを配置する方法

先ほどは1つのBOXをabsoluteを使用して配置しましたが、今回は複数のBOXを使うとどのようなコードが必要になるか見ていきます。

ここでは下図のような配置にしてみます。

absoluteを使ってBOXを複数配置

1つめのBOXを配置する

それでは最初のBOXを配置していきましょう。

それぞれのHTMLとCSSを見ていきます。

HTML<div class="test1">
<p class="yohaku1">positionをrelativeに指定してtop20px、left20pxの位置</p>
<div class="label">
<p class="yohaku2">positionをasbsoluteに指定して固定</p>
</div>
</div>
CSS.test1 {
position: relative;
top: 20px;
left: 20px;
border: 1px solid black;
width:300px;
height:150px;
background-color: yellow;
}.yohaku1 {
padding-top: 40px;
}
.yohaku2 {
margin-top: 0;
padding-top: 5px;
}
.label {
position: absolute;
top: 0px;
left: 0px;
background-color: white;
width: 300px;
height: 30px;
border-bottom: 1px solid black;
}

実際にブラウザに表示されると下図のようになります。
absoluteでBOXを1つ表示させた時

この時のHTMLとCSSを詳しく見ていきます。

BOXが1つの場合のHTMLとCSSを解説

コードを書く手順は、

①親要素であるdivタグでclassセレクタを使ってtest1を指定。

②classセレクタ.test1で全体のBOXを作成。positionはrelativeを指定していてtop20px、left20pxとします。

③classセレクタ.yohaku1はBOX内の要素(ここではBOX内の文字)。上部の余白を40pxとしていますが、ケースバイケースです。0pxにした場合、文字がラベルに重なります。ここではpaddingを使用していますがmarginでも可能です。

④classセレクタ.yohaku1はラベルBOX内の要素(ここではラベル内の文字)。margin-top0にしているのは、要素の上部をラベルBOX内の上部に合わせるためです。上部を合わせた後で、paddingを使って文字の余白を調整しています。

⑤classセレクタ.labelでラベルBOXを作成。positionはabsoluteを指定。これにより親要素である全体のBOXの位置が移動しても自動的にラベルBOXも移動します。(常に全体BOXにくっついている状態)

top0px、left0pxにすることで、全体BOXとラベルBOXの左上の頂点が重なるようにしています。幅は全体BOXと同じ幅の300pxを指定しています。

下線だけしか指定していないのは、すでに全体BOXで上左右の線が指定されているからです。

2つめ、3つめのBOXを配置する

次は2つめ、3つめのBOXを配置していきます。

それぞれのHTMLとCSSを見ていきます。

HTML<div class="test1">
<p class="yohaku1">positionをrelativeに指定してtop20px、left20pxの位置</p>
<div class="label">
<p class="yohaku2">positionをasbsoluteに指定して固定</p>
</div>
</div><div class="test2">
<p class="yohaku1">positionをrelativeに指定してtop20px、left100px、margin-top20pxの位置</p>
<div class="label">
<p class="yohaku2">positionをasbsoluteに指定して固定</p>
</div>
</div><div class="test3">
<p class="yohaku1">positionをrelativeに指定してtop20px、left200px、margin-top30pxの位置</p>
<div class="label">
<p class="yohaku2">positionをasbsoluteに指定して固定</p>
</div>
</div>
CSS.test1 {
position: relative;
top: 20px;
left: 20px;
border: 1px solid black;
width:300px;
height:150px;
background-color: yellow;
}
.test2 {
position: relative;
top: 20px;
left: 100px;
margin-top: 20px;
border: 1px solid black;
width:300px;
height:150px;
background-color: yellow;
}
.test3 {
position: relative;
top: 20px;
left: 200px;
margin-top: 30px;
border: 1px solid black;
width:300px;
height:150px;
background-color: yellow;
}
.yohaku1 {
padding-top: 40px;
}
.yohaku2 {
margin-top: 0;
padding-top: 5px;
}
.label {
position: absolute;
top: 0px;
left: 0px;
background-color: white;
width: 300px;
height: 30px;
border-bottom: 1px solid black;
}

それでは、この時のHTMLとCSSを詳しく見ていきましょう。

BOXを3つ配置した時のHTML

BOXが3つの場合のCSSの前半

BOXが3つの場合のCSS後半部分

上図はBOXが3つに増えた場合のHTMLとCSSです。

これが実際にブラウザに表示されると↓↓↓のようになります。

BOXを3つに増やした場合の詳しい解説

2つめ、3つめの位置をずらしていますが、ラベルBOXがしっかりと親要素である全体のBOXにくっついているのがわかると思います。

fixedを使用して配置を固定する方法

fixed(フィックスド)は直訳すると「固定された」という意味になります。

CSSプロパティpositionでは「固定された絶対位置」と表されることが多いです。

ここでいう固定された絶対位置とは要素を特定の位置に固定して表示させることです。(言葉の通りそのままの意味です)

具体的な例を見ていきましょう。

fixedを使用した配置の例

上は背景色黄色の要素をfixedで固定した場合です。

下にスクロールしても固定された要素が動いていないことが分かりますね。

fixedを使用する場面で多いのはサイト上部にあるヘッダーやサイト下部にあるフッターです。

それぞれのHTMLとCSSを見ていきます。

HTML<body id="body">
<p id="fixed">ここはfixedによって固定された要素です。</p>
<p class="test1">ここは1番目の文章です</p>
<p>ここは2番目の文章です</p>
<p>ここは3番目の文章です</p>
<p>ここは4番目の文章です</p>
<p>ここは5番目の文章です</p>
<p>ここは6番目の文章です</p>
<p>ここは7番目の文章です</p>
<p>ここは8番目の文章です</p>
<p>ここは9番目の文章です</p>
<p>ここは10番目の文章です</p>
<p>ここは11番目の文章です</p>
<p>ここは12番目の文章です</p>
<p>ここは13番目の文章です</p>
CSS#body {
background-color: silver;
}
#fixed {
position: fixed;
top: 0;
left: 0;
margin: 0;
padding-top: 25px;
width: 100%;
height: 50px;
background: yellow;
}
.test1 {
margin-top: 90px;
}

それでは、この時のHTMLとCSSを詳しく見ていきましょう。

fixedのHTMLとCSSの解説

 

コメント

タイトルとURLをコピーしました