position:fixedが効かない事件簿

Posted at 2016-12-20

初めに

よし、ヘッダーを画面上に固定してやろ（＾ω＾）

って時に

え、ヘッダーの上に文字が来るんですけど( ‘д‘⊂彡☆))Д´) ﾊﾟｰﾝ

とか

スクロールして、動的におしゃれに上部メニューを表示させたいのにスクロール中に表示されない( ‘д‘⊂彡☆))Д´) ﾊﾟｰﾝ

とかそんな事件の対処法をテンションに任せて書いていこうと思います。

事件１「z-index」

概要

ヘッダーにposition:fixedを指定してtop:0,left:0で画面上部に固定しているのに

なんで他の要素が上に来ているの！？という事件。

DEMO

キャプチャ

code

html

<body>
    <div class="div_elm">
        hoge
    </div>
    <div class="fixed_elm">
        hoge
    </div>
    <div class="div_elm">
        hoge
    </div>
</body>

css

.fixed_elm {
    height: 100px;
    width: 100px;
    background: red;
    position: fixed;
    top: 0px;
    left: 0px;
}

.div_elm {
    position: relative;
    background-color: yellow;
    text-align: center;
}

解決策

position:fixedにしている要素の前後に同じdiv要素を配置しているのに、なんでposition:fixedにしている要素の次の要素は上に来ているのか・・・

原因はdiv要素にposition:relativeを指定している時は、position:fixedにしている要素にz-indexを指定していないからでした。

下記のように修正するときちんと動きました。

.fixed_elm {
    height: 100px;
    width: 100px;
    background: red;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
}

事件２「Transform」

概要

ヘッダーにposition:fixedを指定してtop:0,left:0で画面上部に固定しているのに

位置がなぜか画面上部にならない！？

DEMO

キャプチャ

code

html

<body>
    <div class="fixed_elm">
        hoge
    </div>
</body>

css

body {
    transform: translate3d(0, 0, 0);
    height: 300px;
    background-color: black;
}

.fixed_elm {
    height: 100px;
    width: 100px;
    background: red;
    position: fixed;
    top: 0px;
    left: 0px;
}