スクロール親divの位置が固定されていない

Question

ボタンがありますfixedがouter divです。問題は、私がposition: fixed（ページがスクロールしている間にボタンを押したままにする）を設定したときに正しく動作しなかったことです。

ボタンはまだスクロールして画面から移動しました。ここ

は

.rotate { 
 
    transform: rotate(30deg); 
 
    background: blue; 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 0 auto; 
 
} 
 

 
.fixed { 
 
    position: fixed; 
 
    background: red; 
 
    padding: 10px; 
 
    color: white; 
 
    top: 50px; 
 
}

<div class="rotate"> 
 
    <button class="fixed"> I am fixed inside a rotated div.</button> 
 
</div> 
 
<!-- <div class="fixed"> I am fixed outside a rotated div.</div> -->

がどのようにページをスクロールしながら、常に画面上に表示され、ボタンを保つためにそれを修正することができます私のコードですか？

Answer 1

これは、ブラウザによって、バギーや設計動作のいずれかによってである：基本的に、そして「位置：固定」する親要素がセットの「変換」がある場合、固定要素が固定されることはありません。

が

Positions fixed doesn't work when using -webkit-transform

の回避策として、あなたはその後、「余白」で位置を調整し、ラッパーと巣の色とその内側に回転させて使用することがあります：次のスレッドは、その上にいくつかの参照があります。ちょっとハッキリですが、状況によってはうまくいくかもしれません。ここにデモがあります：

[http://codepen.io/jean-andreghetto/pen/OxEaVN?editors=1100][2] 

Answer 2

スタティックボックス内に固定要素があります。つまり、赤いリンクを外側にではなく青いボックスに固定しました。あなたがする必要があるのは、青色のボックスの赤いリンクを削除することです。

これは必要なものです。

https://codepen.io/dawsonhudson17/pen/jGKeRy

.rotate { 
    transform: rotate(30deg); 
    background: blue; 
    width: 300px; 
    height: 300px; 
    margin: 0 auto; 
} 
.fixed { 
    position: fixed; 
    background: red; 
    padding: 10px; 
    color: white; 
    top: 50px; 
    left: 50%; 
    z-index: 2; 
    transform: translate(-50%) rotate(30deg); 
    display: block; 
    } 

    <button class="fixed"> I am fixed inside a rotated div.</button> 

    <div class="rotate"> 
    </div>