2

前提

<div  style="transform: translate3d(0px, 0px, 0px);">
  <p></p>
</div>

下記のようにtranslate3dの値を変更した場合でも、pタグを常に左上で固定表示したい

<div style="transform: translate3d(400px, 0px, 0px);">
  <p></p>
</div>

・pタグに下記設定をしてみたのですが、pタグは移動してしまいます

z-index: 1000;
position: fixed;
top: 0;
left: 0;
2
  • 1
    Pタグのstyletransform: translate3d(-400px, 0px, 0px);にする方法はどうでしょうか?
    – otak-lab
    Commented 2016年12月23日 5:19
  • 固定したいのにどうしてtransform指定するのだろう、と思っていたのですが、回答を読んでようやく意味がわかりました
    – re9
    Commented 2016年12月27日 9:13

1 件の回答 1

3

これは出来ません。
この場合position: fixed; は、

祖先要素の transform プロパティが none 以外に設定されている場合、その祖先要素がビューポートの代わりにこの要素の包含ブロックとして使用されます
https://developer.mozilla.org/ja/docs/Web/CSS/position

との理由で、画面に対する固定にはなっていません。
また、position の指定以外でビューポートに固定する方法も無いと思います。


近い事を行なう方法として以下が考えられます。

transform で移動させる

oTak さんのコメントで紹介されていますが、逆の transform を指定するなどして左上に移動させる方法です。
但し、上記の理由で通常は親要素と一緒にスクロールしてしまいますから、親要素も position: fixed; でビューポートに固定してある場合にしか使えません。

親要素では無く、その子要素たちに transform を指定する

div 要素を変形させたい、という場合でもその子要素を全て変形させれば必要な結果が得られるかも知れません。
div > * に対して transform による変形を指定しておき、固定したい p 要素に対してだけはtransform: none; とします。
兄弟要素が transform で変形している分には position: fixed; に影響ありませんので、これで固定出来ます。

div > * {
	transform: translate3d(400px, 0px, 0px);
}
p{
	transform: none;
	position: fixed;
	top: 0;
	left: 0;
}
<div>
	<h1>H1 要素</h1>
	<p>P 要素</p>
</div>

2
  • 2
    なおfixedとの兼ね合いはspecでも課題となっているので、今後変更される可能性はあります。 w3.org/TR/css-transforms-1/#issue-ca2c412c
    – unarist
    Commented 2016年12月26日 22:40
  • @mjy。「祖先要素の transform プロパティが none 以外に設定されている場合~」。リンク確認してみましたが、確かにそう書いていますね。初めて気が付きました(z-index絡みの問題だとばかり思っていたので、「fixed」における「transform プロパティ」の仕様だと知り驚きました)。また、「div 要素を変形させたい、という場合でもその子要素を全て変形させれば必要な結果が得られるかも知れません」については、発想が凄いなと思いました。提示いただいたコード参考になりました
    – re9
    Commented 2016年12月27日 9:08

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。