【CSS】positionを利用した位置指定の方法

スポンサーリンク
スポンサーリンク
【CSS】positionを利用した位置指定の方法:アイキャッチHTML/CSS
スポンサーリンク
スポンサーリンク

CSSで要素の位置を指定するには、positionプロパティを利用する方法があります。

今回の記事では、このpositionプロパティについて紹介したいと思います。

【CSS・位置指定】positionプロパティとは何か?

positionとは、要素の位置を決めるためのプロパティのことです。大まかに以下のような事ができます。

positionプロパティで出来ること
  • 要素の位置をpx単位でズラす。
  • ある要素に別の要素を重ねる。
  • 画面の決った位置に要素を固定する。
スポンサーリンク
スポンサーリンク

【CSS・位置指定】poshitionの基本的な書き方

poshitionは以下のような書き方をします。

セレクタ{
poshition:値;
}

top・bottom・left・right

セレクタ{
poshition:値;
}

poshition:値はあくまで、基準を決める作業です。具体的な位置はtop・bottom・left・rightをセットで利用します。

top

topは上からの距離です。

bottom

bottomは下からの距離です。

left

leftは左からの距離です。

right

rightは右からの距離です。


〇〇{
poshition:値;
top:20px;
}

このように書くと上から20pxの距離に、要素を置くことができます。

〇〇{
poshition:値;
top:20px;
left:10px;
}

このように書くと「上から20px・左から10px」の距離に、要素を置くことができます。

【CSS・位置指定】poshitionの値の紹介と具体的な使い方

poshitionの値と、その具体的な使い方を紹介します。

①static

staticは初期値です。上下左右に動かすことはできません。z-indexを利用して要素の重なり順すらも変えることはできません。

なのでstaticは基本的には、あまり使うことは無いと思います。

②relative

現在の位置を基準に、相対的な位置を決めます。

relativeに設定した上でtop・bottom・left・rightを利用することで、要素の移動が可能になります。

要素の基準位置は、もともと要素があった場所から計算されます。

<div class="parent">
  <p id="absolute1">要素A</p>
  <p id="absolute2">要素B</p>
</div>
.parent{
  position: relative;
  background:black;
  width:500px;
  left:100px;
}

#absolute1{
  background:blue;
  width:100px;
  height:100px;
  color:white;
}
#absolute2{
  background:green;
  width:100px;
  height:100px;
  color:white;
}
position: relative;

こちらの例ではparentと言う要素をposition: relativeで基準の位置を決めて、左に200px移動しています。

pxでも%でも、position: relativeを使う事で、その要素の現在の位置から色々と移動をさせることができます。

③absolute

親要素を基準に絶対的な位置を決めます。

<div class="parent">
  <p id="absolute1">要素A</p>
  <p id="absolute2">要素B</p>
</div>
.parent{
  /*親要素は必ずrelativeに*/
  position: relative;
  background:black;
  width:500px;
  height:200px;
  left:100px;
}

#absolute1{
  background:blue;
  width:100px;
  height:100px;
  color:white;
}
#absolute2{
  background:green;
  width:100px;
  height:100px;
  color:white;
  position: absolute;
  top: 0;
  left: 10px;
}
position: absolute;

parentといった要素の中に、要素Aと要素Bがあるとします。

普通なら要素Bは要素Aより順序が下ですから、重なることはありません。

しかし、poshtion:absoluteを使うことで、それが可能になります。

スポンサーリンク
スポンサーリンク

poshtion:absoluteを使うと、親要素であるparentを基準に位置が計算されるので、この例の場合はparentを基準にしたtop:0とleft:0の場所に要素が移動します。

ちなみに親要素のpositionは、必ずrelativeにしてください。基準値が無い状態ではposition: absoluteは機能しないので、これはもうお決まりの呪文のように覚えておくと良いでしょう。

④fixed

画面の決った位置に要素を固定します。固定ヘッダーを作りたい時などに、よくお世話になります。

<p id="fixed">fixed</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
<p>俺TUEEEEEEEEEEEEEEE</p>
#fixed {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  background: #2e8b57;
  color:white;
}
position: fixed;

「俺TUEEEEEEEEEEEEEEE」の文字が永遠と並んでいますが、position: fixedを使う事で一番上のfixedの要素が画面に固定され追尾するようになります。

【CSS・位置指定】poshitionを利用して自由自在に要素を動かしましょう

poshitionを上手く利用すると、要素を自由に動かすことが可能になります。

是非、いろいろ試して「要素がどのように動くのか?」確認してみてください。

スポンサーリンク
スポンサーリンク
HTML/CSS
shigureをフォローする
プロフィール
このブログの管理人です

Webライター/Webデザイナー。ダイエット歴10年。保有資格:日商簿記2級。

2021年4月に開設した当ブログも、月間4万PVを達成しました。これからも精進してまいります。

shigureをフォローする
Shigure Factory

コメント

スポンサーリンク
タイトルとURLをコピーしました