css3

CSS 画面上にメニューバー等コンテンツを固定する方法



Webページ上で指定したコンテンツを画面上に固定出来るCSSの方法。
画面上にメニューやツールバーにも使えますし、最近多いSNS系のボタンを画面に常に出すことも出来ます。

画面上に固定する

sample01
※右下にサンプルが出るようにしています。
<style>
#sample{
    border: 1px solid;
    /* 表示位置を固定 */
    position: fixed;
    bottom: 40px;
    right: 20px;
    /* 表示順序 他のコンテンツが重ならないようにする */
    z-index: 9999;
    background-color:#FFFFFF
}
</style>
<div id="sample">
    sample01
</div>

CSS解説

positionfixed:絶対位置への配置。absoluteと同様の動きをしますが、スクロールを行っても位置が固定されます。
z-index重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。指定なしだと親と同様の階層になります。
そのため常に前に出したい場合は高い数値を指定してください。
top
bottom
right
left
配置位置(距離)を指定する。
サンプルはbottom,right指定のため右下となりました。
これで常に表示したいコンテンツが画面上に固定で表示することが出来ます。


No Responses

コメントを残す