[RUBY] [Position: relative, absolue]

Cette fois, nous afficherons la position: relative et la position: absolue.

position: relative, position: absolute sont des propriétés css utilisées lorsque vous souhaitez afficher un élément enfant au-dessus d'un élément parent spécifique.

Cette fois, je vais vous expliquer comment superposer des icônes dans le formulaire texte.

L'image ci-dessus est une description de la partie formulaire, mais l'élément parent est .Form__contents et comme son élément enfant Un champ de saisie de texte et une icône sont disposés.

Que se passe-t-il si vous affichez sans décrire la position en css?

L'icône sera affichée à l'extrême droite.

Cette fois, je veux superposer l'icône affichée à l'extrémité droite à l'extrémité droite du champ de texte, donc à cette fin Je vais définir la position.

Puisque je veux superposer l'icône sur l'élément parent .Form__contents, écrivez ce qui suit dans la référence .Form__contents.

En décrivant cette position: relative, cela signifie que la norme de déplacement de l'élément enfant doit se chevaucher en fonction de la position à partir de laquelle est établie.

Décrivez comme suit dans les éléments enfants qui se chevauchent.

Position d'écriture: absolue du côté de l'élément enfant que vous souhaitez déplacer. Vous pouvez maintenant spécifier la position en fonction de l'élément spécifié en relatif. En plus de cela, il est nécessaire de spécifier jusqu'où vous voulez vous déplacer, donc cette fois je veux superposer l'icône à une position 10px de l'extrémité droite, donc je l'écris comme à droite: 10px;. Si vous souhaitez spécifier la distance par rapport au sommet, vous pouvez écrire top:.

En faisant la description ci-dessus

De cette façon, vous pouvez superposer l'icône sur le bord droit du champ de texte.

c'est tout.