CSSの配置を設定出来るプロパティのposition。このうち、fixedを指定するとその要素は画面に固定され、スクロールしても追従するようになります。
しかし、このposition: fixed;が効かない場合があります。
この記事では、どんな時にposition: fixed;が効かないのか、原因と解決方法をご紹介したいと思います。

position: fixed;が効かない原因

まずは結論から。position: fixed;が効かない原因は親要素にtransformが指定されている場合です。
ある時、position: fixed;が効かなくて調べていた際、この原因に辿り着きました。

そして、実際に自分のソースコードを確認すると確かにposition: fixed;を指定している要素の親要素にtransformが指定されていました。
以下がその時のHTMLとCSSのコードを再現しました。

・HTMLはこちら。

<header class="header">
    <nav class="header-nav">
        <ul>
            <li><a href="#">項目名</a></li>
            <li><a href="#">項目名</a></li>
            <li><a href="#">項目名</a></li>
            <li><a href="#">項目名</a></li>
        </ul>
    </nav>
</header>
<div class="content">
    <p>コンテンツが入ります。</p>
</div>

・CSSはこちら。

body{
    height: 500px;
}
.header{
    width: 100%;
    padding: 15px;
    transform: translate(5px,5px);
}
.header-nav{
    width: 100%;
    padding: 15px;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 9999;
}
.header-nav ul{
    display: flex;
}
.header-nav ul li{
    list-style-type: none;
}
.header-nav ul li:not(:last-child){
    margin-right: 20px;
}
.content{
    padding-top: 50px;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

position: fixed;を指定しているのに、画面に固定されず、スクロールすると画面外に消えていってしまいます。

position: fixed;が原因解決方法

position: fixed;が効かない場合、親要素に指定されているtransformを消しましょう。
たったこれだけでposition: fixed;が正常に表示されるようになります。

先ほどのコードからtransform: translate(0,0);を消したコードがこちらです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

position: fixed;を指定した要素が画面に固定されましたね。

transformを指定している内容は代替案で実装するようにします。

transformの代替案

ここからはtransoformの代替案をご紹介します。
transformが使えない場合、これらの代替案で同等の機能を実装することが出来ます。

tramsform: translate();の場合

tramsform: translate();は要素の配置位置を調整するために使用するプロパティです。

transform: translate(5px,5px);

この記述を以下のように変更します。

position: relative;
left: 5px;
top: 5px;

これでtramsform: translate();を使用した時と同じ結果が得られます。

まとめ

いかがでしたか？
position: fixed;が効かない場合は、親要素にtransformが指定されていないか確認しましょう。
指定されている場合は、それを消し、代替案にて同等の機能を実装するようにしましょう。