あとりえOneブログ

常に表示したい「お問合せ」などの表示をするのに最適な、トップヘッダー。

サイトのPRコメントを表示するのにもぴったり。

でも、スクロールしたら見えなくなってしまっては意味が薄れてしまう。

そこで活躍するのが追従するヘッダーの設定。

以下、「あとりえOne」での記述を記録。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

【HTML】

<header class="header-top">

 <div class="flexbox">

  <div class="flex-item"><a href="faq.html">よくある質問</a></div>

  <div class="flex-item"><a href="mail.html">お問合せ</a></div>

  </div>

  </header>

【CSS】

.header-top {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 50px;

  color: #6f5436;

  line-height: 1;

  background: #C2B6AF;

}

参考：https://codingls.com/htmlcss/103/