151

通常の CSS の状況では、固定 div が指定された場所 ( top:0px, left:0px) に正確に配置される状況があります。

translate3d 変換を持つ親がある場合、これは尊重されないようです。私は何かを見ていませんか？スタイルや変換元のオプションのような他の webkit-transform を試しましたが、うまくいきませんでした。

黄色のボックスがコンテナー要素の内側ではなくページの上隅にあると予想される例で、 JSFiddleを添付しました。

フィドルの簡略化されたバージョンを以下に示します。

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}
<div id="container">
    Blue: Outer, <br>
    Purple: Middle<br>
    Yellow: Inner<br>
    <div id="outer"> 
        <div id="middle">
            <div id="inner">
                Inner block
            </div>
        </div>
    </div>
</div>

translate3d を固定位置の子で機能させるにはどうすればよいですか?

4

10 に答える 10

217

これは、W3C 仕様transformに従って、 が新しいローカル座標系を作成するためです。

HTML 名前空間では、transform 以外の値noneを指定すると、スタッキング コンテキストと包含ブロックの両方が作成されます。オブジェクトは、固定配置された子孫の包含ブロックとして機能します。

これは、固定位置がビューポートではなく、変換された要素に固定されることを意味します。

現在、私が認識している回避策はありません。

Eric Meyer の記事: Un-fixing Fixed Elements with CSS Transformsにも記載されています。

于 2013-03-06T19:31:47.480 に答える
13

Bradoergo が提案したように、ウィンドウscrollTopを取得して、次のように絶対位置の上に追加するだけです。

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $('#fixedContainer');
  fixedTitle.css('position','absolute');
  fixedTitle.css('top',s + 'px');
}fix_scroll();

$(window).on('scroll',fix_scroll);

とにかくこれは私のために働いた。

于 2014-01-31T18:59:07.850 に答える
13

ページ内のアイテムが変換を使用しているときに、固定されたトップ ナビゲーションでちらつきがありました。トップ ナビゲーションに次のように適用すると、ジャンプ/ちらつきの問題が解決されました。

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

SOに関するこの回答のおかげで

于 2015-04-07T15:48:07.073 に答える
5

position: sticky;Firefox と Safariでは代わりに使用できますがposition: fixed;、他のブラウザーでは機能しません。そのためには、javascript が必要です。

于 2015-12-14T18:45:53.807 に答える
0

私は同じ問題に遭遇しました。唯一の違いは、'position: fixed' の要素の 'top' および 'left' スタイル プロパティが JS から設定されていることです。だから私は修正を適用することができました：

var oRect = oElement.getBoundingClientRect();

oRect オブジェクトには、実際の(ビュー ポートに相対的な) 上と左の座標が含まれます。したがって、実際の oElement.style.top および oElement.style.left プロパティを調整できます。

于 2013-07-22T12:29:52.647 に答える
0

子要素に反対の変換を適用してみてください:

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(-100%, 0px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>
于 2016-08-06T13:59:02.770 に答える
0

要素の変換中に動的クラスを追加します。$('#elementId').addClass('transformed'). 次にcssで宣言します。

.translat3d(@x, @y, @z) { 
     -webkit-transform: translate3d(@X, @y, @z); 
             transform: translate3d(@x, @y, @z);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

それから

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

それから

.transformed {
    #elementId { 
        .translate3d(0px, 20px, 0px);
    }
}

子要素におよびプロパティ値を指定position: fixedすると、親要素が変換されるまで正常に機能し、固定されたままになります。変換が元に戻されると、子要素は再び修正されたものとしてポップされます。これにより、クリックで開閉するナビゲーション サイドバーを実際に使用していて、ページを下にスクロールしても固定されたままのタブ セットがある場合は、状況が緩和されます。topz-index

于 2018-07-30T19:08:19.557 に答える
-1

これに対処する 1 つの方法は、同じ変換を固定要素に適用することです。

<br>
<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(0px, 20px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>
于 2015-09-03T04:07:37.920 に答える