L'application de position:fixed à un élément rompt l'alignement du contenu contrôlé par display:flex.
P粉131455722
2023-08-02 17:11:54
<p>J'en ai besoin. mot et. Les éléments de ligne sont ancrés en haut de la fenêtre lorsque la page défile - dans leur position d'origine, où les lignes se trouvent sous les mots. <br /><br />J'ai réussi à le réparer. mot et position : collants, mais confrontés à deux problèmes :<br /></p><p><code></code><code></code></p>
Quand j'applique du collant sur . ligne, il "saute" au-dessus du mot et je ne sais pas comment le fixer en haut de la fenêtre mais le forcer à y rester. La rigidité sous l'élément mot n'était pas la valeur correcte au départ - elle "secouerait" le texte lorsque vous commenciez à le faire défiler. La valeur correcte est fixe - cela fonctionne très bien et je préfère l'utiliser. Cependant, ça casse ! L'emplacement de la classe d'avertissement (police rouge) : elle devrait y figurer. À l'opposé (horizontalement) du texte de transcription, mais une valeur fixe qui regroupe le texte de ces deux classes. <br /><p><br /></p><p>Voici également le JS Bin avec cette "situation". </p><ol>
</ol>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.word {
position : collante ;
haut : 0 ;
indice z : 1 ;
couleur de fond : blanc ;
}
.mot {
rembourrage : 1vw 3vw 2% 3vw ;
}
.mot-détails {
affichage : flexible ;
justifier-contenu : espace entre les deux ;
align-items : ligne de base ;
}
.transcription {
poids de la police : normal ;
}
.avertissement {
La couleur rouge;
marge gauche : auto ;
}
.doubler {
bordure supérieure : 2 px solide #fdb239 ;
}
.signification {
type de style de liste : aucun ;
compteur-reset : article ;
tirets : auto ;
taille de police : calc(0,7em + 1,5vw) ;
}
.ce qui signifie > ;
position : relative ;
}
.signifiant > li::avant {
contenu : compteur (élément );
contre-incrément : article ;
position : absolue ;
haut : 0 ;
alignement du texte : centre ;
marge gauche : calc(-0,7em - 2,5vw);
}
.sens-mot {
marge supérieure : 50 px ;
}
.phrases {
type de style de liste : aucun ;
remplissage à gauche : 0 ;
taille de police : calc(0,7em + 1,5vw) ;
marge supérieure : 30 px ;
}
.phrases > li.phrase-ru {
marge supérieure : 15 px ;
}</pré>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html>
<corps>
<div class="mot">
<span>Mot</span>
<div class="mot-détails">
<div class="transcription">/ transcription /</div>
<div class="avertissement">COMMENTAIRE</div>
</div>
</div>
<hr class="ligne">
<ol class="signification">
<li class="meaning-word">Meaning1</li>
<ul class="phrases">
<li class="sentence-en">Lorem Ipsum est simplement un texte factice de l'industrie de l'imprimerie et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, lorsqu'un imprimeur inconnu a pris une galerie de caractères et l'a brouillée pour en faire un livre de spécimens de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut vers la composition électronique, restant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la sortie de feuilles Letraset contenant des passages de Lorem Ipsum, et plus récemment avec des logiciels de publication assistée par ordinateur comme Aldus PageMaker incluant des versions de Lorem Ipsum</li>
<li class="sentence-ru">Contrairement à la croyance populaire, le Lorem Ipsum n'est pas simplement un texte aléatoire. Il a ses racines dans un morceau de littérature latine classique datant de 45 avant JC, soit plus de 2000 ans. Richard McClintock, professeur de latin au Hampden-Sydney College en Virginie, a recherché l'un des mots latins les plus obscurs, consectetur, dans un passage du Lorem Ipsum, et en parcourant les citations de ce mot dans la littérature classique, a découvert la source incontestable. Lorem Ipsum provient des sections 1.10.32 et 1.10.33 de « de Finibus Bonorum et Malorum » (Les extrêmes du bien et du mal) de Cicéron, écrit en 45 avant JC. Ce livre est un traité de théorie de l'éthique, très populaire à la Renaissance. La première ligne du Lorem Ipsum, "Lorem ipsum dolor sit amet..", provient d'une ligne de la section 1.10.32.</li>
</ul>
<li class="sens-mot"> Sens2</li>
<ul class="phrases">
<li class="sentence-en">Lorem Ipsum est simplement un texte factice de l'industrie de l'imprimerie et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, lorsqu'un imprimeur inconnu a pris une galerie de caractères et l'a brouillée pour en faire un livre de spécimens de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut vers la composition électronique, restant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la sortie de feuilles Letraset contenant des passages de Lorem Ipsum, et plus récemment avec des logiciels de publication assistée par ordinateur comme Aldus PageMaker incluant des versions de Lorem Ipsum</li>
</ul>
</ol>
</corps>
</html></pre>
<p><br /></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }<html> <body> <div class="sticky-container"> <div class="word"> <span>Word</span> <div class="word-details"> <div class="transcription">/ transcription /</div> <div class="warning">COMMENT</div> </div> </div> <hr class="line"> </div> <ol class="meaning"> <li class="meaning-word">Meaning1</li> <ul class="sentences"> <li class="sentence-en">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</li> <li class="sentence-ru">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.</li> </ul> <li class="meaning-word">Meaning2</li> <ul class="sentences"> <li class="sentence-en">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</li> </ul> </ol> </body> </html>