web-dev-qa-db-ja.com

cssは、ビューポートではなく親要素に相対的な子要素の位置を「固定」します。なぜですか

私はwordpressテーマを開発しています。同位体グリッドを使用し、投稿のホバーはタイトルをブラウザの下部に固定された位置で表示する必要があります。

<div id="main">
    <article class="hubbub">
        //article content
    <h2 class="subtitled">
        //h2 content
    </h2>
    </article>
</div>

JQueryを介して、<article>にカーソルを合わせると、その子要素h2.subtitledが表示されます。 <article>は相対位置にありますが、同位体スクリプトによって絶対位置を取得します。 h2.subtitledは次のように固定されて配置されます。

.subtitled {
            display: none;
            position: fixed;
            z-index: 999999999;
            bottom: 20px;
            left: 0;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 42px;
            text-align: center;
            color: yellow;
}

何らかの理由で、h2.subtitle要素は、親の<article>要素に関連して固定されるため、各<article>の下部に配置されます。 <h2>を<article>の外側に設定すると、ブラウザーに関連して固定されますが、無限スクロールが新しい<article>要素を追加し、<article>タイトルも含む必要があるため、<h2>要素の内側に配置する必要があります。

この位置を固定してブラウザウィンドウに関連付ける方法を知っている人はいますか？

ありがとう！

csspositionfixed
41
R4ttlesnake

FWIW、私がこれに出くわしたとき、問題はCSSの-webkit-transform: translate3d(0, 0, 0)を持つ親divであることが判明しました。どうやら、これはposition: fixedを持つ子要素の混乱の可能性の既知の原因です。

私がやろうとしていたこと（スクロールするときにキーnav要素をページの上部に貼り付ける方法としてfixedをオン/オフにする）のための解決策はappendページのbody要素に配置し、適切な位置に保持し、そうでない場合はラッパーdivに戻します。これのいずれかがOPを助けたかどうかはわかりませんが、このバグを自分で追いかけているのであれば、調べる価値があります。

98
BlairHippo

固定要素の親からtransformプロパティを削除します。

何らかの理由で、これにより、固定要素はドキュメントではなく親に対して相対的になります。

Codepenの例

5
Alex

私の場合、親要素にはtransformプロパティはありませんが、同じ問題を引き起こすfilter: drop-shadow(...)はありません。フィルターを削除することで問題は解決しました。

0
Marzieh Bahri