絶対配置と相対配置
◉ position プロパティ
基本的に、位置を指定する top / bottom / left / right プロパティと組み合わせて利用する。
◉ position プロパティで指定できる値
⚫︎ static
配置方法を指定しない。
top / bottom / left / right プロパティの指定ができない。
初期値。
⚫︎ relative
相対配置。absolute とセットで使用する。
top / bottom / left / right などの プロパティの値も同時に指定する。
「 relative 」を指定すると、自分自身が元々配置されていたボックスを基準に
top / bottom / left / right で指定した場所へ配置される。
EX)
.box1 {
position : relative ;
top : 20px ;
left : 50px ;
}
⚫︎ absolute
絶対配置。relative とセットで使用する。
top / bottom / left / right などの プロパティの値も同時に指定する。
「 absolute 」を指定すると、ブラウザウィンドウを基準に
top / bottom / left / right で指定した場所へ配置される。
EX)
.box 2 {
position : absolute ;
top : 20px ;
left : 50px ;
}
「 absolute 」を指定している場合、
親要素の position プロパティに「 static 」以外の値が指定されていると、
親要素の形成しているボックスの基準に配置される。
なので、「 absolute 」を指定する場合は、
親要素に「 position : relative ; 」を指定する。
EX)
#page {
width : 200px ;
margin : 0 auto ;
border :solid 5px #CCCCCC ;
position : relative ;
}
.box 2 {
position : absolute ;
top : 20px ;
left : 50px ;
}
⚫︎ fixded
絶対配置。スクロールしても動かない。
top / bottom / left / right などの プロパティの値も同時に指定する。
「 fixed 」を指定すると、ブラウザウィンドウを基準に
top / bottom / left / right で指定した場所へ配置される。
一見すると、「 absolute」&「 relative 」と同じように見えるが、
スクロール時の挙動に大きな違いがある。
「 absolute」&「 relative 」 スクロールすると移動する
「 fixed 」 スクロールしても移動しない
一般的に、ページのヘッダーやフッター、サイドバーなど、
スクロールしても常にブラウザウィンドウ上に配置しておきたいものに利用される。
◉ z-index プロパティ
コンテンツに「 position : relative 」が指定されている場合、
このままではスクロールすると、
コンテンツ部分がページヘッダーの上に重なってしまう現状が起こる。
これを解消するためのプロパティ「 z-index 」がある。
「 z-index 」は重なりの順番を指定するプロパティで、値は整数で指定する。
０を基準に、値が大きいほど、上に重なる。
マイナス値を指定することも可能。
EX)
header {
position: fixed ;
top : 0 ;
left : 0 ;
width : 100% ;
z-index : 1 ;
}
#contents {
width : 200px ;
margin : 0 auto ;
border :solid 5px #CCCCCC
position : relative ;
z-index : 0 ;
}
例のようにすることで、
ヘッダーが 常に、1番上、に来ることになる。
