CSS TOP

Le haut est décrit comme le point supérieur. Dans CSS, nous avons la propriété supérieure que nous utilisons pour régler la position supérieure de l'élément. Lorsque nous définissons n'importe quelle valeur dans cette propriété «supérieure», la position de l'élément sera définie en fonction de la valeur donnée. Il définit la valeur en haut de la page. Il n'affecte que la position verticale de l'élément. Nous pouvons définir la valeur de cette propriété supérieure dans «PX», «EM» ou aussi «%». Lorsque nous voulons définir certains éléments du haut dans la direction verticale, nous utilisons cette propriété «supérieure» dans CSS. Dans ce guide, nous utiliserons cette propriété «supérieure» dans CSS et définirons la position des éléments. Nous fournirons quelques exemples dans lesquels nous utilisons cette propriété «supérieure» et vous montrerons comment elle affecte la position de l'élément.

Exemple 1:

Pour appliquer cette propriété, nous devons avoir des éléments. Donc, d'abord, nous créons des éléments dans HTML. Pour faire un fichier HTML, nous devons ouvrir un nouveau fichier. Visual Studio Code est le logiciel que nous utiliserons. Nous commencerons à coder dans ce fichier. Nous tapons également "!"Et puis cliquez sur« Entrer »pour récupérer les balises de base HTML, qui sont requises dans tous les codes HTML. Après tout cela, nous devons taper le corps dans lequel nous allons écrire quelques paragraphes à côté de la tête. Nous définissons différents noms pour chaque paragraphe afin que nous utiliserons ces noms lorsque nous appliquons la propriété «supérieure» sur ces paragraphes. Ici, nous avons quatre paragraphes avec le nom «P1», «P2», «P3» et «P4» et nous changerons leur position supérieure en utilisant la propriété supérieure dans CSS.

Tout d'abord, nous avons le type ". P1 ”qui représente le premier paragraphe. Nous définissons sa «position» comme «absolu». Ensuite, nous allons définir sa position par le haut à l'aide de la propriété «Top». Dans cet exemple, nous utilisons «%» avec la valeur de la propriété «top». Nous définissons la valeur de la propriété supérieure du premier paragraphe comme «10%». De plus, définit sa «couleur» sur «rouge» et «16px» pour la «taille de police». Maintenant, nous avons le deuxième paragraphe «P2». Sa «position» est également «absolue» et nous définissons la valeur de propriété «supérieure» du deuxième paragraphe comme «25%». Sa «couleur» de la police est «verte» et «taille de police» est «18px». Ensuite, la «position» du troisième paragraphe est à nouveau «absolue» et le «haut» est «40%». Le paragraphe «couleur» est «bleu» et «20px» est la «taille de police». Pour le paragraphe «P4», nous allons définir «70%» en tant que «Top» et «Purple» «Color» et «Font-Size» est «22px» pour ce quatrième paragraphe.

Vous pouvez voir que la position supérieure de tous les paragraphes est différente car nous avons défini ces positions supérieures dans cet exemple. Le premier paragraphe apparaît comme «10%» du haut de la page car nous avons défini «10%» dans la propriété «Top». L'autre apparaît exactement dans la même position supérieure que nous avons définie dans le code CSS.

Exemple n ° 2:

Dans cet exemple, nous utilisons deux éléments div de noms différents comme «B» et «C» à l'intérieur d'un autre div «A». Nous en avons également un titre avant ces éléments div. Maintenant, nous appliquerons la propriété «supérieure» à ces éléments div.

Le «div. A ”est la div principale que nous avons créée dans le HTML et nous définissons la« position »de cette div comme« relative ». Ensuite, nous utilisons les propriétés «largeur» et «hauteur» et définissons «400px» et «200px» pour ceux-ci respectivement. Nous créons la frontière pour cette div en utilisant la propriété «Border». La propriété de largeur et de hauteur ci-dessus est là pour régler la largeur et la hauteur de la bordure div. La «bordure» que nous définissons est «3px» dans sa largeur et le «rouge» dans la «couleur» du type «solide». Nous avons également «div. B ”et nous allons définir la« position »de ce« div. B ”qui est présent à l'intérieur de la première div et le définit comme« absolu »et son« haut »est« 0 ». Nous créons une bordure autour de cette div en utilisant la propriété «frontière». Cette bordure est dans la couleur «bleue» de type «3px» et «solide»."

Après cela, nous passons à notre dernier div qui est «div. C ". Encore une fois, nous avons réglé sa «position» sur «absolue» mais son «haut» est «100px». Dans cet exemple, nous utilisons «PX» pour définir le «haut» de la troisième div. Sa frontière est définie comme «vert» et le «coulor en arrière-plan» est défini ici comme «vert clair».

Vous pouvez remarquer qu'il n'y a pas d'espace entre les frontières de la première div et de la deuxième div parce que nous avons réglé le haut de la deuxième div comme «0». Le troisième div est défini comme «100px» afin que vous puissiez voir dans la sortie comment il apparaît. Il apparaît à «100px» ci-dessous de la bordure supérieure de la première div.

Exemple # 3:

Ici, nous avons un cap, puis le principal conteneur div. À l'intérieur de cette div principale, nous avons également trois autres conteneurs Div. Tous ces conteneurs div sont des noms différents, nous définirons donc différentes valeurs supérieures pour tous les conteneurs div.

Tout d'abord, nous mentionnons le nom de cette div que nous voulons styliser. Nous avons donc mis le nom de la première div, puis coiffait cette div en utilisant la propriété «position». Ensuite, définissant sa valeur en utilisant le mot-clé «relatif». Nous avons défini son «haut» sur «00px» et la «largeur» et la «hauteur» que nous définissons ici est respectivement «400px» et «350px». Nous allons régler sa «bordure» sur le type «2px» et «solide» dans la couleur «noir». La deuxième div «position» que nous définissons ici est «absolue» et la valeur du «haut» est «50px» et la «bordure» est de couleur «rouge». La «position» de la troisième div est définie à «absolue». La valeur «supérieure» est «150px» pour la troisième div et la couleur «bordure» est «bleue».

Ensuite, sort div et encore une «position» est «absolue». «200px» la valeur majeure et «vert» pour la «frontière». Toutes les frontières que nous utilisons dans ce code sont en type «solide» et également en largeur «2px».

La sortie vous montre la position supérieure de tous les conteneurs div. Tous les éléments de div apparaissent à une position différente du haut de la première div. Tout cela est dû à la propriété «supérieure» que nous avons utilisée dans le code CSS.

Exemple n ° 4:

Nous avons un cap, puis l'élément Div principal et trois autres éléments div à l'intérieur de l'élément div principal. Nous utilisons différents noms pour tous les éléments div. Donc, nous utiliserons des valeurs supérieures distinctes pour chacun d'eux.

Nous avons réglé la hauteur du Div Div1 en tant que «300px» et sa «couleur arrière-plan» est «blanche». Ensuite, nous déménageons vers les autres éléments div qui sont présents à l'intérieur de cette div principale. Nous définissons la valeur de la propriété «supérieure» de ces divs dans «EM». Nous avons réglé le deuxième div «Top» comme «5EM». La troisième div «Top» est «10em» et la dernière valeur div «top» est «20EM».

Dans cette sortie, à l'intérieur du premier div, le deuxième élément div est rendu à «5EM» du «haut», la troisième div est rendue à «10em» du «haut», et aussi la troisième div est rendue à «20EM «Depuis le haut, car nous avons utilisé la propriété« supérieure »ici dans notre code CSS.

Conclusion:

Ce guide a expliqué comment utiliser la propriété «Top» de CSS. Nous avons parcouru ce qu'est la propriété supérieure et comment le définir dans CSS. La propriété «supérieure» est utilisée ici pour définir la position des éléments du haut et nous avons utilisé «PX», «EM» et «%» pour définir la valeur de la propriété «supérieure». Nous avons présenté plusieurs exemples dans ce guide et aussi. Nous avons collé toutes les captures d'écran des codes ainsi que la sortie ici. Vous utiliserez cette propriété «supérieure» dans vos codes après avoir étudié à fond ce guide.