web-dev-qa-db-fra.com

css "fixe" les positions des éléments enfants par rapport à l'élément parent et non à la fenêtre, pourquoi?

Je développe un thème wordpress, avec une grille d'isotopes et où un survol sur un post devrait afficher son titre avec une position fixe en bas du navigateur. J'ai cette structure simplifiée:

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

Via jQuery, survolez <article> devrait afficher son élément enfant h2.subtitled. <article> est positionné relatif, mais obtient une position absolue par le script isotopique. Le h2.subtitled est positionné fixe avec:

.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;
}

Pour une raison quelconque, le h2.subtitle les éléments sont positionnés de manière fixe par rapport au parent <article> élément, donc au bas de chaque <article>. Si je règle le <h2> en dehors du <article>, il est positionné de manière fixe par rapport au navigateur, mais ils doivent être à l'intérieur du <article> élément, car un défilement infini ajoute le nouveau <article> éléments et ils devraient également contenir <h2> titres.

Est-ce que quelqu'un sait comment rendre cette position fixe et liée à la fenêtre du navigateur?

Merci!

csspositionfixed
41
R4ttlesnake

FWIW, quand j'ai rencontré cela, le problème s'est avéré être un parent div avec -webkit-transform: translate3d(0, 0, 0) dans son CSS. Apparemment, c'est une source connue de chaos potentiel dans les éléments enfants avec position: fixed.

Pour ce que j'essayais de faire (activer et désactiver fixed pour coller un élément de navigation clé en haut de la page en défilant), la solution était de append it à l'élément page body quand il était temps de le maintenir en place et de le coller dans son enveloppe div quand il ne l'était pas. Aucune idée si tout cela aurait aidé le PO, mais si vous poursuivez vous-même ce bug, cela vaut la peine d'être examiné.

98
BlairHippo

Supprimez la propriété transform du parent de l'élément fixe.

Pour une raison quelconque, l'élément fixe devient relatif par rapport au parent au lieu du document.

exemple Codepen.

5
Alex

Dans mon cas, l'élément parent n'a pas de propriété transform mais filter: drop-shadow(...) ce qui a causé le même problème. Le retrait du filtre a résolu le problème.

0
Marzieh Bahri