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

画面上に固定する

※右下にサンプルが出るようにしています。

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

CSS解説

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

これで常に表示したいコンテンツが画面上に固定で表示することが出来ます。


«前の記事：様々なファイルを圧縮してくれるサイト「Media4x」PHP ファイルアップロード時に発生する問題：次の記事»