CSS【position】の使い方をわかりやすく説明するよ!

CSSのプロパティってホントにたくさんあって使いこなせるようになるまで時間がかかるんですよね(泣)

ここではCSSの『position』の使い方を説明していきたいと思います。使いこなせると役に立つプロパティです。習得しちゃいましょう。

position(ポジション)プロパティとは?

positionプロパティは、ボックスの配置を絶対位置か相対位置かを指定する際に使用します。

配置方法は、 top,bottom,left,rightを使用して、基準位置からの距離を指定します。

※基準位置とは何も指定しない場合に表示される位置を基準位置としています。

プロパティの値は以下の4つあります。

説明
static 特に配置方法を指定しません。これが基準位置となります。

staticの場合、top,bottom,left,rightを指定しても適用されません。

relative 相対位置の配置となります。staticを指定した場合に表示される位置が基準位置になり、その位置の相対位置となります。
absolute 絶対位置の配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed 絶対位置の配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。

それぞれのプロパティを指定して表示してみましょう。

■CSS

p{
height:50px;
position:relative;
}
.sample1{
background-color: orange;
position:static;
top:20px;
left:20px;
}
.sample2{
background-color: orange;
position:relative;
top:20px;
left:20px;
}
.sample3{
background-color: orange;
position:absolute;
top:20px;
left:20px;
}
.sample4{
background-color: orange;
position:fixed;
top:20px;
left:20px;
}
.content{
background-color: yellow;
width:500px;
margin:auto;
}

■HTML

<div class="content">
staticの場合→<span class ="sample1">static</span>
relativeの場合→<span class ="sample2">relative</span>
absoluteの場合→<span class ="sample3">absolute</span>
fixedの場合→<span class ="sample4">fixed</span>
</div>

 

表示してみると

まとめ

  • staticは、基準位置に表示されます。top,leftを指定しても得になにも変更されていません。
  • relativeは、基準位置からtop:20px,left:20px移動した位置に配置されています。
  • absoluteは、親ボックスがpなので親ボックスからtop:20px,left:20px移動した位置に配置されています。
  • fixedは、ウィンドウの左上からtop:20px,left:20px移動した位置に配置されています。スクロールしても位置が固定されます。

 

以上!


自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

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

CAPTCHA