ATOZ CSS: Différence entre traduire et position relative

Les plats clés

• La principale différence entre la position CSS: relative et transformée: tradlate () réside dans la façon dont ils affectent la disposition d'autres éléments. Position: relative modifie la position de l'élément dans le flux de documents, affectant potentiellement d'autres éléments, tandis que la transformation: tradlate () déplace un élément sans affecter la disposition d'autres éléments.
• CSS Transform: tradlate () est souvent préféré pour les animations en raison de son utilisation de l'accélération GPU (Graphics Processing Unit), ce qui se traduit par des animations plus lisses et de meilleures performances. Il convient également de noter que les valeurs basées sur le pourcentage se comportent différemment entre les deux méthodes, traduisant en pourcentage de la largeur ou de la hauteur calculée de l'élément.
• La position CSS CSS: relative et transformée: tradlate () peut être utilisée sur le même élément. Cette combinaison permet un placement précis d'un élément sur la page et une modification supplémentaire de cette position. Cela en fait un ensemble puissant d'outils pour le placement des éléments.

Cet article fait partie de notre série Atoz CSS. Vous pouvez trouver d'autres entrées à la série ici. Vous pouvez afficher la transcription complète et screencast pour la vidéo correspondante sur Translatex ici.

Bienvenue dans notre série Atoz CSS! Dans cette série, je vais explorer différentes valeurs (et propriétés) de CSS en commençant par une lettre différente de l'alphabet. Nous savons que parfois les screencasts ne sont tout simplement pas suffisants, donc dans cet article, nous avons ajouté des conseils rapides sur les différences entre la traduction et la position.

x est pour traduire et positionner

Il existe un certain nombre de propriétés CSS pour placer des éléments sur la page. Il s'agit notamment de propriétés de mise en page à grande échelle comme le flotteur, la marge et le rembourrage et des outils plus fins comme la position et la traduction ().

En surface, position: relative et transformée: tradlater () semble fonctionner de manière assez similaire, mais il existe des différences subtiles qui sont importantes à saisir, nous choisissons donc le bon outil pour le travail.

Quelle est la différence entre traduire et position: relative?

Dans cet article, nous examinerons un certain nombre de différences entre ces méthodes de placement des éléments, mais d'abord, permettez-moi de clarifier ce que font ces différentes propriétés.

Si nous définissons la position: relative sur un élément, nous pouvons l'utiliser pour créer une limite pour Absolument Positionner des éléments à l'intérieur. C'est probablement l'utilisation la plus courante du positionnement relatif, mais c'est pas l'utilisation dont nous discutons ici.

Si nous combinons la position: relative avec l'une des propriétés de décalage supérieur, en bas, à gauche ou à droite, l'élément sera déplacé de sa place d'origine dans la disposition tout en préservant l'espace dans le document qu'il occupe une fois. L'élément sera déplacé vers une nouvelle couche et son «ordre de couche» ou son ordre d'empilement peut ensuite être contrôlé avec la propriété Z-Index.

<span><span>.thing</span> {
</span>  <span>position: relative;
</span>  <span>top: 100px;
</span>  <span>left: 50px;
</span><span>}</span>

Dans l'exemple ci-dessus, l'élément sera déplacé à 100px du haut et à 50px de la gauche de sa position d'origine.

Lors de l'utilisation de transform: traduire (x, y), nous obtenons un résultat visuel très similaire à l'utilisation de la position relative. Le même résultat que ci-dessus pourrait être obtenu avec l'extrait suivant:

<span><span>.thing</span> {
</span>  <span>transform: translate(50px, 100px);
</span><span>}</span>

Dans ce cas, nous traduisons les coordonnées de l'élément de 50px le long de l'axe x et 100px le long de l'axe y. Le résultat final est visuellement le même que l'exemple de position précédente.

Alors, pourquoi avons-nous deux façons de faire la même chose? Eh bien, il y a est quelques différences entre ces approches…

Prise en charge du navigateur

La position

est une propriété CSS2 tandis que la transformation est une propriété CSS3. Il existe des différences dans le support du navigateur en conséquence, bien que les seuls navigateurs qui ne prennent pas en charge les transformations 2D soient IE8 et ci-dessous.

Si vous avez besoin de prendre en charge les anciennes versions de IE, la transformation ne sera pas une option pour vous.

accélération du GPU

La propriété Transform utilisera l'accélération matérielle dans la mesure du possible, donc l'utilisation de tradlate () sur la position verra des avantages de performance si des animations ou des transitions sont également utilisées sur l'élément.

Si vous souhaitez déplacer un élément dans le cadre d'une transition ou d'une animation de l'image clé, favorisez l'utilisation de Translate plutôt que de position (cela vaut à la fois pour le positionnement absolu et relatif). Pour plus de profondeur à ce sujet, y compris une explication et un profilage de performances, consultez cette vidéo de Paul Irish.

Les valeurs basées sur le pourcentage se comportent différemment

Une différence majeure entre ces deux méthodes de placement des éléments est la façon dont ils réagissent aux valeurs basées sur le pourcentage.

Prenez le balisage et les styles suivants:

<span><span><span><div</span> class<span>="box position"</span>></span><span><span></div</span>></span> 
</span><span><span><span><div</span> class<span>="box transform"</span>></span><span><span></div</span>></span></span>

<span><span>.box</span> {
</span>  <span>width: 200px;
</span>  <span>height: 200px;
</span><span>}
</span><span><span>.position</span> {
</span>  <span>position: relative;
</span>  <span>left: 50%;
</span>  <span>background: red;
</span><span>}
</span><span><span>.transform</span> {
</span>  <span>transform: translateX(50%);
</span>  <span>background: blue;
</span><span>}</span>

Les deux éléments ont reçu un décalage de leur bord gauche de 50%.

Le bord gauche de la boîte rouge sera à 50% du bord de son conteneur parent.

Le bord gauche de la boîte bleue sera à 100px du bord gauche de son conteneur parent. Cette distance est due à 50% de 200px est de 100px.

Lors de la définition des valeurs de pourcentage avec traduire, le pourcentage est mesuré en pourcentage des éléments de largeur ou de hauteur calculées.

Voir le Pen Vyyxgj par SitePoint (@SitePoint) sur Codepen.

combiner la position et traduire ensemble

Un dernier point à souligner est que parce que la position et la transformation sont deux propriétés différentes, nous pouvons les combiner ensemble. Cela nous permet de combiner le positionnement absolu pour placer un élément dans un endroit très spécifique sur la page, puis de modifier cette position avec Transform.

Un exemple de cela pourrait être de faire en sorte qu'un élément positionné animer de haut en bas ou de gauche et de droite. Ou nous pouvons combiner le positionnement avec traduire pour atteindre un centrage vertical flexible.

Ainsi, bien que ces deux méthodes de placement des éléments puissent être utilisées pour obtenir des résultats similaires, il existe des différences significatives et la combinaison des forces de chaque approche en fait un ensemble vraiment puissant d'outils.

Les questions fréquemment posées (FAQ) sur CSS traduisent vs position

Quelle est la principale différence entre CSS traduire et positionner?

La principale différence entre CSS traduit et la position réside dans la façon dont ils manipulent la position d'un élément. La position CSS modifie la position de l'élément dans le flux de documents, ce qui signifie qu'elle peut affecter la disposition d'autres éléments. D'un autre côté, CSS traduit est une fonction de transformation qui déplace un élément sans affecter la disposition d'autres éléments. Il modifie la position de rendu visuel, pas la position réelle dans le flux de document.

Quand dois-je utiliser CSS traduire au lieu de la position?

CSS traduit est idéal lorsque vous souhaitez déplacer un élément sans affectant la disposition d'autres éléments. Il est également bénéfique pour les animations car il favorise de meilleures performances et des animations plus lisses. En effet, Translate utilise le GPU (Graphics Processing Unit), qui est plus efficace pour rendre les graphiques et les animations.

Puis-je utiliser les deux CSS traduisent et positionnent sur le même élément?

Oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, Vous pouvez utiliser les deux CSS traduisant et positionnez sur le même élément. Cependant, il est important de comprendre comment ils travaillent ensemble. La propriété de position affectera d'abord la position de l'élément dans le flux de documents, puis la fonction de traduisation déplacera l'élément de cette position.

Pourquoi CSS est-il traduit souvent recommandé pour les animations sur la position?

CSS traduit est souvent recommandé pour les animations car il utilise le GPU, qui est plus efficace pour rendre les graphiques et les animations. Il en résulte des animations plus lisses et de moins d'utilisation du CPU (Unité de traitement centrale), ce qui peut améliorer les performances globales d'une page Web.

CSS Traalise-t-il avec tous les types de valeurs de position?

Oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, oui, CSS traduit fonctionne avec tous les types de valeurs de position - statique, relative, absolue, fixe et collante. La fonction de traduire déplacera l'élément de sa position, quelle que soit la valeur de position.

Quelles unités puis-je utiliser avec CSS traduire?

Avec CSS traduisant, vous pouvez utiliser des valeurs de pixels, des pourcentages et des unités de la fenêtre. Les pourcentages sont relatifs à la taille de l'élément lui-même, pas à son parent. Cela vous donne plus de flexibilité et de contrôle sur le mouvement de l'élément.

Puis-je animer le mouvement d'un élément avec la position CSS?

Bien qu'il soit techniquement possible d'animer le mouvement d'un élément avec Position CSS, ce n'est pas recommandé. En effet Pour les animations, le CSS traduit est la meilleure option.

Comment les CSS traduisent-ils affectent-ils l'index z d'un élément?

CSS traduit n'affecte pas directement l'index z d'un élément. Cependant, l'application d'une fonction traduisale à un élément crée un nouveau contexte d'empilement, qui peut influencer la façon dont l'index z est appliqué.

Puis-je utiliser CSS traduire pour déplacer un élément en diagonale?

Oui , vous pouvez utiliser CSS traduire pour déplacer un élément en diagonale. Vous pouvez le faire en spécifiant à la fois les valeurs x et y dans la fonction Translate. Par exemple, traduire (50px, 50px) déplacera l'élément de 50 pixels vers la droite et 50 pixels vers le bas, créant efficacement un mouvement diagonal.

Le CSS traduit-il affecte la zone cliquable d'un élément?

Non, CSS Traduction n'affecte pas la zone cliquable d'un élément. La zone cliquable reste à la position d'origine dans le flux de documents, même si le rendu visuel de l'élément a été déplacé avec tradlate.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!