−メニューの固定−

画像固定の基本

top left right bottom を％表示にするとレスポンシブ対応になる！

※画面の固定：fixed

#page-top{
  width:100%;
  height:50px;
  position:fixed;
  right:0px;
  bottom:0px;
  display:none;
}


position:fixed;　ここで固定する
固定位置を指定−指定しないと中央配置になる

＜最下部＞
width:100%; これがないと全幅しない
position:fixed;
right:0px;
bottom:0px;

＜上下中央（左端）＞
position:fixed;
left:0;
top:50%;
margin-top:-200px;/*開始位置が中央になるのでその分コンテンツを上にあげる*/

＜上下左右中央＞
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);

＜左右中央＞
position:absolute;
left: 0;
right: 0;
margin: auto;

＜右端に固定＞
.cp_menu label::before {
position: absolute;
content: '▼';
color: #ffffff;
right: 0.5em;
top: 25%;
}

stickyの使い方

h2 {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

画像の重ね順

absoluteは「ウィンドウ、または親要素」を基準にし、そこからの距離の場所に配置されるので、
親要素を基準にしたい場合は、親要素にもpositionをいれないといけない。

親ボックスにrelative、子要素にabsolute

基本の画像はrelativeで指定。重ねる順番はabsolute


【 HTML 】
<div class="position">
	<p>あいうえお</p>
	<img src="image/sample/sample-img.jpg" />
</div>



【 CSS 】
.position{/*基本*/
	position:relative;
	width:100%;
}
.position p{
	position:absolute;
	z-index:3;
	top:0;
}
.position img:nth-child(1){
	position:absolute;
	z-index:2;
	top:0;
}

右側画面固定のposition

/*右固定*/
.sidebox_move{
	position: relative;
	height:370px;
}
.imgsetmove {
	position:fixed;
	right: 0;
	top:100;
}
.sidebox_move img{
	margin-bottom:8px;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
	-moz-top-left-radius:10px;
	-moz-bottom-left-radius:10px;
	-webkit-top-left-radius:10px;
	-webkit-bottom-left-radius:10px;
}

position: relative;にして画面を固定しつつ、子ボックスで動かないように右端に固定する。

position:fixed;

上下中央に揃える場合、topに50%指定する。開始位置がここになるので、上に少しマイナスで画像を上げてあげる。

/*--------------------------------------------------------

SNS関連

--------------------------------------------------------*/
.sns{
	position:fixed;
	left:0;
	top:50%;
	margin-top:-200px;
}
.sns ul{list-style:none;}
.sns ul img{
	width:80px;
	display:block;
}