固定位置 (fixed)

HTMLで要素を画面の特定の位置に固定するには、CSSのpositionプロパティを使用し、値に”fixed”を設定します。この方法では、スクロールしてもその要素は常に指定した位置に表示されます。

div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  text-align: center;
}

上記のCSSコードでは、ページの上部に固定されたヘッダーを作成します。`top: 0;` と `left: 0;` で位置を指定し、`width: 100%;` で幅を画面いっぱいに広げています。

この要素はスクロールしても画面の上部に固定され続けます。

スクロール時に固定 (sticky)

スクロールして一定位置まで移動した時に要素を固定する方法には、CSSのpositionプロパティを”sticky”に設定します。この方法は、要素がその親要素のスクロール範囲内で移動し、指定した位置に達した時に固定されます。

header {
  position: -webkit-sticky; /* Safari対応 */
  position: sticky;
  top: 0;
  background-color: #ddd;
  padding: 10px;
}

上記のCSSコードでは、スクロール時にヘッダーが画面の上部に固定されます。`top: 0;` が固定位置の指定です。

このヘッダーはスクロールすると、ページの上部にくっついて固定されます。

相対位置 (relative) と絶対位置 (absolute)

要素の位置を相対的にまたは絶対的に指定する方法もあります。相対位置は、その要素が元々の位置を基準にして移動します。絶対位置は、最も近いposition指定がある親要素を基準に移動します。

相対位置 (relative)

div {
  position: relative;
  left: 20px;
  top: 10px;
  background-color: lightblue;
}

上記のCSSコードでは、`left: 20px;` と `top: 10px;` によって、要素が元々の位置から右に20px、下に10px移動します。

絶対位置 (absolute)

div {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: lightcoral;
}

この場合、要素は最も近いpositionが指定された親要素を基準にして位置決めされます。例えば、親要素に`position: relative;` が設定されている場合、子要素は親要素内で50pxだけ移動します。

実際の例

実際のウェブページでよく使われる固定要素の例をいくつか見てみましょう。

固定ヘッダーの例

<header style="position: fixed; top: 0; left: 0; width: 100%; background-color: #333; color: white; text-align: center;">
  固定されたヘッダー
</header>

上記のコードでは、ヘッダーがページの上部に固定され、スクロールしても常に画面の上に表示されます。

サイドバーの固定

<div style="position: fixed; top: 20px; right: 20px; width: 200px; height: 300px; background-color: lightgray;">
  固定サイドバー
</div>

こちらはサイドバーが右側に固定されており、ページのスクロールに関係なく表示され続けます。