# ヘッダーを固定したら上部が切れて表示されてしまう

**URL:** <https://community.shopify.com/t/topic/193014>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [February 18, 2023, 5:21am UTC](https://community.shopify.com/t/topic/193014 "2023-02-18T05:21:32Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

Dawnテーマでヘッダーを固定表示するため、base.cssに`position: fixed`を追加したところ、ページ上部のコンテンツ（文字や画像）が切れて表示される問題が発生。

**原因:**
ヘッダーが固定されたことで、下のコンテンツがヘッダーに潜り込んでしまっている。

**解決策:**
CSSの調整で対応可能。具体的には:
- `.header-wrapper`の`z-index`を900に変更
- `.content-for-layout`に`margin-top: 81px`（スマホ時）と`margin-top: 101px`（PC時）を追加してヘッダー分の余白を確保
- `.cart-notification-wrapper`に`z-index: 999`を追加してカート通知の表示を優先

数値はヘッダーの高さに合わせて調整が必要。修正CSSコードが提示されており、差し替えでの対応が推奨されている。

<div class="post-metadata">

**Author:** ![Claclac](https://avatars.discourse-cdn.com/v4/letter/c/9d8465/32.png) [@Claclac](https://community.shopify.com/u/Claclac)\
**Post date:** [February 18, 2023, 5:21am UTC](https://community.shopify.com/t/topic/193014/1 "2023-02-18T05:21:32Z")

</div>

テーマはDawnです。  
ヘッダーを固定して表示したかったので、コード編集からbase.cssにいき、下記のようにコードを編集しました。

```auto
.header-wrapper {
display: block;
width:100%;
position: fixed;
background-color: rgb(var(--color-background));
z-index: 999;
}

```

ヘッダーは固定されたのですが、上部の文字や画像が切れて表示されてしまいます。  
positionをstickyに変更してみたりもしましたが、上手くいきませんでした。

解決する方法はありますでしょうか。ご教示よろしくお願い申し上げます。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [February 22, 2023, 10:29am UTC](https://community.shopify.com/t/topic/193014/2 "2023-02-22T10:29:36Z")

</div>

ご質問いただいている、ヘッダーにコンテンツが潜り込んでしまう件ですが、CSSの調整を行うことで調整が可能です。

下記CSSコードは十分な検証はできておりませんので、うまく動作しないことがあればお知らせください。

**修正CSS**

記載いただいているCSSと差し替えていただければと思います。

```markup
.header-wrapper {
  display: block;
  width:100%;
  position: fixed;
  background-color: rgb(var(--color-background));
  z-index: 900;
}
.content-for-layout {
  margin-top:81px;
}
.cart-notification-wrapper {
  z-index: 999;
}
@media screen and (min-width: 990px) {
  .content-for-layout {
    margin-top:101px;
  }
}

```

**変更点解説**

- カートに商品を入れた際表示される表示エリアが潜り込んでしまうため、  
.header-wrapperのz-indexを900に変更
- .content-for-layoutに『margin-top:81px;』を追加  
数値の81pxはスマホ時のヘッダーの高さに合わせ調整ください。
- .cart-notification-wrapperに『z-index: 999;』を追加  
カートに商品を入れた際のポップアップ潜り込み回避用
- @media screen and (min-width: 990px) 以下でPCサイズ時の調整  
.content-for-layoutに『margin-top:101px;』を追加  
数値の101pxはPC時のヘッダーの高さに合わせ調整ください。

ご参考まで。

(キュー小坂)