CSS

CSS　positionの使い方

要素の位置を決めるpositionプロパティ

positionプロパティは、「要素の位置を決める」ためのプロパティで相対位置か絶対位置かを指定する際に使用します。
値によって４つの働きをします。

そしてpositionプロパティと併用して
その基準位置からみて要素がどこにあるかを top、 bottom、 left、 rightのプロパティに値をとってその方向や距離を設定します。

具体的には画像などの要素の位置を動かしたり、逆に決まった位置に要素を固定したり。
要素の上に別の要素を重ね合わせたり。といった使い方ができます。

セレクタ{

position(プロパティ):relative（値）

}

これと組み合わせて top、 bottom、 left、 righを例えば以下のように使います。

{
  position: relative;
  top: 10px;
  left: 10px;
}

positionの値は４種類

positionプロパティを規定する値には４つあります。

static

初期値。CSSで何も指定されていなければpositionプロパティはこの状態になっています。
要素は通常の位置にあって動かすことができませんし
staticではz-index:0の状態になっていて。重なり順も変えられません。（z-indexとは要素の重なり順を決めるプロパティ）
top、bottom、left、rightの値は指定しても適用されません。

position:relative

初期値で決められた要素の位置（staticを指定した場合に表示される位置）を基準として
そこから要素を目的の位置に動かしたい（相対位置への配置）ときに使われます。

例えばpositionの指定無しで記述したとします。

HTML

2つのpタグで囲まれたテキストを設定します。

<p class="static">インコは可愛い</p>
<p class="relative">慣れてくるともっとかわいいよ</p>

CSSは以下。

後でわかりやすいように字を少し大きくし
背景色をオレンジと水色にしてあります。

positionは指定してありませんのでstatic(初期状態）になっています。

.static{background: orange;
	width: 300px;
	height:40px;
	font-size: 2em

}
.relative{background: skyblue;
    width: 300px;
	height:85px;
	font-size: 2em

}

ブラウザ表示は以下。

この水色の部分だけにpositionプロパティをrelative(移動可能）のしてみます。

右に３em下に5em移動させてみます。
(1emは16pxでしたね)

position: relative;
top: 3em; left: 5em;

と記述します。

なおpositionプロパティは必ず装飾の前に置きます。

.relative{
	position: relative;
    top: 3em;
    left: 5em;

	background: skyblue;
    width: 300px;
	height:85px;
	font-size: 2em
	
}

すると以下のようにブラウザ表示されました。

position:absolute

親ボックス（要素は表示領域と内外余白枠でできていてそれをボックスともいうんでしたね）
にpositionプロパティが指定されていないとabsoluteの起点はページ全体になります。
しかし、親要素にpositionの指定を加えることで、親要素を起点にすることができます。

なのでabsoluteを指定する場合には親要素を作り、relativeかfixedを記述しておくのです。

実際にやってみます。

親要素を作るために先程のHTMLの記述を少し変えてみます。
親要素<div>を追加し。parentと名前をつけました。

またpタグの下のclass名をabsoluteに変更しました。

   <div class="parent">
     <p class="static">インコは可愛い</p>
     <p class="absolute">慣れてくるともっとかわいいよ</p>
   </div>

CSSの変更は以下。

親要素CSSには

.parent{

position:relative;をくわえました。

内側の余白20pxを入れ。また背景の色を緑色にし。
幅500px高さ200pxにしました。

.parent{
 position:relative; 
padding: 20px; 
background: green; width: 500px; 
height:200px; }

繰り返しになりますが。

absoluteを使って位置調整するときは、親要素にposition:relative

かfixedを指定して置かないと基準位置がずれて思ったように表示されません。

次に水色の方を絶対位置に固定したいと思います。
今回

position: absolute;

top: 0; left: 0;

にしてみました。
.absolute{ position: absolute;
top: 0; left: 0;
background: skyblue; width: 300px;
height:85px;
font-size: 2em }
全体としてCSSは以下。

.parent{
position:relative;
padding: 20px;

	background: green;
	width: 500px;
	height:200px;

}
.static{background: orange;
	width: 300px;
	height:40px;
	font-size: 2em

}
.absolute{
	
 position: absolute;
  top: 0;
  left: 0;
	background: skyblue;
    width: 300px;
	height:85px;
	font-size: 2em
	
}

すると以下のようにブラウザ表示されます。
絶対位置を指定した水色の部分は他の要素ボックスがあってもそれとは関係なく。
絶対位置に居座っています。

paddingの数値を大きくして例えば60pxにしてみます。
すると以下のようにブラウザ表示されました。

positionの指定をしていない要素は余白部分の広がりに応じて移動しますが。
余白の数値が変わってもposition: absolute;で指定した要素の位置は変わりません。

しかし

bottom: 0;

left: 0;

と絶対位置を別の位置に指定すると水色の部分は以下のように移動します。

一旦位置を決めればそこから動かないという性質を利用して
画像に文字を貼り付けたりするのに使ったりします。

例えば。
先程の記述の上のpタグを画像に変更しました。

<div class="parent">
     <<img src="インコ３().jpg" alt="インコ">
     <p class="absolute">慣れてくるともっとかわいいよ</p>
   </div>

そのうえでCSSを変更します。

親要素のpaddingと上のPタグにかかるCSSの記述を無くし。
position: absolute;と組み合わせる値を
top: 0;

left: 0;

と、元に戻しました。

.parent{
position:relative;


	background: green;
	width: 500px;
	height:800px;
先程の
.absolute{
	
 position: absolute;
  top:  0;
  left: 0;
	background: skyblue;
    width: 300px;
	height:85px;
	font-size: 2em
	
}

すると以下のようにブラウザ表示されます。