position: fixed; してるのに、親要素の相対っぽい感じになる
position: fixed; って親要素に依存せずに画面内に固定できるはずやのにできなかったので、一個ずつ原因ぽいやつを消していったら親要素にこいつを指定してたからでした。
transform: translateY(0);
もうちょっと調べてみると、translateY、ではなく、"Transform" してる要素の中では、position: fixed; は absolute 的なふるまいをするということ。
それは、
This is because the transform creates a new local coordinate system, as per W3C spec:
In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.
引用元："css3 - webkit css 'transform3d' + 'position: fixed' issue - Stack Overflow
ということらしい。
なんとなく和訳すると、Transform は、ローカル viewport 的なものを生成する。
position: fixed; が、viewport に対しての固定座標に配置されるので、なるほどという感じ。
See the Pen postion:fixed not working with Transform by yuji nakagawa (@nakagaw) on CodePen.
これでよく問題になるのは、CSSのみでモーダルをやって、Transition の Visibility で表示・非表示してるときとかに、普通なら場所に依存せずに置けるけど、固定で真ん中に出したい場合、親要素の外に出したりしないといけなかったりする。
あと、大事なことですが、IE9以下では CSS3 の Transition 自体がサポートされていないので、position: fixed; すると position: fixed; されます。
消えるときのアニメーションがなくてもよいのであれば、display: none; と Animation の組み合わせで同じようなことはできそうです。
See the Pen PNoMBE by yuji nakagawa (@nakagaw) on CodePen.
上の話とは違うけど、z-index も同じような感じで、けっこうややこしいときある。
