【CSS】positionːfixedの使い方

「CSS」では、「position:fixed」を指定することで、要素の位置を固定位置で指定することができます。「position:fixed」を指定した要素は、ブラウザのビューポートを基準に位置を決定します。そして、「top」「left」「right」「bottom」の値によって、ブラウザのビューポートからの相対位置を設定することができます。

例えば、以下のように「position」プロパティに「fixed」を指定し、「top」「left」の値を指定することで、要素を固定位置で配置することができます。

このように指定することで、その要素に対して、「top:20px」「left:30px」という相対位置が指定され、ブラウザのビューポートから「top」方向に20px、「left」方向に30pxずらすことができます。


「position:fixed」を使用すると、スクロールに関係なく要素の位置が固定され、要素は常に画面上に表示されます。 例えば、ヘッダーやフッターなど、常に画面上に表示したい要素に使用することができます。

また、「z-index」プロパティを使用することで、「position:fixed」の要素を他の要素より手前に表示することもできます。