CSSでposition指定したときに、固定ヘッダーの上にかぶさる

Question

cssの画像指定で

  position: relative;
  right: -25%;

と指定したとき、固定しているヘッダー（以下のコードで固定）の上に重なります。

header {
   padding: 30px 4% 10px;
   position: fixed;
   top: 50;
   width: 100%;
   background-color: #000;
   display: flex;
   align-items: center;
}

具体的には以下のような感じです
![

黒色で「デモホームページ」や「デモ」と書いている部分がヘッダーです。画像がヘッダーの上を通っているのが分かると思います。position指定する前はこのような現象にはならず、position指定するとこのようになります。

追加で必要な項目があれば応じます

Answer 1

z-index で前面に移動させればどうでしょう。

header {
   padding: 30px 4% 10px;
   position: fixed;
   top: 50;
   width: 100%;
   background-color: #000;
   display: flex;
   align-items: center;
   z-index: 10;
}

z-index - CSS: カスケーディングスタイルシート | MDN

Comments

[退会済みユーザー]

z-index
というプロパティについても調べ、理解することができました。
早急な回答をありがとうございました。
実際に、書き直し実行したところ上手く行きました。