31421


前提

[code]

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

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

[code]

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

* * *

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

[code]

    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    
[/code]


CC BY-SA 3.0
2016-12-21T10:48:56.807
31296
2016-12-27T09:40:56.807
2016-12-26T22:41:52.863
8000
7886
question
css
親要素の「transform: translate3d」設定値を変更した場合でも、子要素の位置を position: fixed で固定したい


これは出来ません。  
この場合`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;` に影響ありませんので、これで固定出来ます。

[code]

    div > * {
     transform: translate3d(400px, 0px, 0px);
    }
    p{
     transform: none;
     position: fixed;
     top: 0;
     left: 0;
    }
[/code]

[code]

    <div>
     <h1>H1 要素</h1>
     <p>P 要素</p>
    </div>
[/code]


CC BY-SA 3.0
2016-12-26T21:54:12.267
31421
2016-12-27T09:40:56.807
2016-12-27T09:40:56.807
3054
3054
31296
answer