HTMLでヘッダーを常に最上部に表示する方法

CSSのpositionプロパティを使用する方法: CSSのpositionプロパティを使って、ヘッダー要素を固定位置に配置することができます。以下はその例です。

<style>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
</style>
<header class="header">
  <!-- ヘッダーのコンテンツ -->
</header>

この方法では、ヘッダー要素に対してposition: fixed;を指定し、top: 0;とleft: 0;で位置を最上部に固定します。width: 100%;は、ヘッダー要素を画面の幅いっぱいに広げるための指定です。

JavaScriptを使用する方法: JavaScriptを使って、スクロールイベントを監視し、ヘッダー要素の位置を調整する方法もあります。以下はその例です。

<style>
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
</style>
<header class="header">
  <!-- ヘッダーのコンテンツ -->
</header>

<script>
window.addEventListener('scroll', function() {
  var header = document.querySelector('.header');
  var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

  if (scrollPosition > 0) {
    header.style.top = '0';
  } else {
    header.style.top = '';
  }
});
</script>

この方法では、window.addEventListener('scroll', ...)を使ってスクロールイベントを監視し、スクロール位置に応じてヘッダーの位置を調整しています。スクロール位置が0より大きい場合は、ヘッダーを最上部に固定し、それ以外の場合は通常のフローに従うようにしています。

これらの方法を使うことで、HTMLのヘッダーを常に最上部に表示することができます。適切な方法を選択し、自分のウェブサイトの要件に合わせて適用してください。