position: fixed; ボックスを固定する
position: fixed;
ボックスを絶対的な位置に固定表示させるプロパティです。スクロールしてもその位置は変わらないので、サイドのメニューを固定させたりすることができます。(残念ながら、一部の古いブラウザでは対応していません)
サンプル − ボックスの位置を固定する
sample css ↓
.sample1_box{/*固定させるボックス*/
position: fixed;
top: 50px;
left: 10px;
padding: 5px;
width: 150px;
height: 250px;
background-color: #fcf;
}
.sample2_box{
position: absolute;
top: 50px;
left: 160px;
width: 200px;
height: 250px;
background-color: #ccc;
}
html ↓
<html>
<body>
<div class="sample1_box">sample1 box</div>
<div class="sample2_box">sample2 box</div>
</div>
</body>
</html>
実際の見え方 ↓