L'application de position:fixed à un élément rompt l'alignement du contenu contrôlé par display:flex.

Question

Au fur et à mesure que la page défile dans sa position initiale, j'ajoute des éléments .word et .line en haut de cette fenêtre, la zone située sous le mot. J'ai géré le .word corrigé en position : collant, mais j'ai été confronté à deux problèmes : lorsque je l'applique à .line, il "saute" autour du mot, ce que je ne fais pas.

P粉539055526 · Answer

Garder plusieurs éléments séparés en haut de la page est difficile lors du défilement, je propose donc une solution plus simple. Le "saut" de votre barre collante est dû au fait que la position initiale de la barre collante est différente de l'endroit où elle se trouve en haut de la page lors du défilement

Pour éviter que votre ligne hr ne disparaisse lors du défilement, je mettrais tous les composants que vous souhaitez conserver en haut de la page dans un conteneur, tel qu'un div, puis je rendrais ce conteneur collant.

Le deuxième problème est que votre barre collante est un peu basse au début à cause du paramètre de marge de corps par défaut (10px). Ensuite, nous faisons défiler la page - les marges du corps ont déjà défilé et vous définissez la barre collante pour qu'elle soit absolument en haut (haut : 0 ;), elle doit donc sauter les 10 px supplémentaires vers le haut. Une solution rapide consiste à définir la marge supérieure du corps sur 0 et votre barre de pâte sera alors toujours dans la même position en haut de la page.

Vous trouverez ci-dessous l'extrait de code mis à jour.

body {
    margin-top: 0;
}

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: white;
}

.word {
    padding: 1vw 3vw 2% 3vw;
}

.word-details {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.transcription {
    font-weight: normal;
}

.warning {
    color: red;
    margin-left: auto;
}

.line {
    border-top: 2px solid #fdb239;
}

.meaning {
    list-style-type: none;
    counter-reset: item;
    hyphens: auto;
    font-size: calc(0.7em + 1.5vw);
}

.meaning > li {
    position: relative;
}

.meaning > li::before {
    content: counter(item);
    counter-increment: item;
    position: absolute;
    top: 0;
    text-align: center;
    margin-left: calc(-0.7em - 2.5vw);          
}

.meaning-word {
    margin-top: 50px;
}

.sentences {
    list-style-type: none;
    padding-left: 0;
    font-size: calc(0.7em + 1.5vw);
    margin-top: 30px;                   
}

.sentences > li.sentence-ru {
    margin-top: 15px;                   
}

Word

/ transcription /
COMMENT

Meaning1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Meaning2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

L'application de position:fixed à un élément rompt l'alignement du contenu contrôlé par display:flex.

répondre à tous(1)je répondrai