Les Positions CSS en 20 minutes - Absolute - Relative - Fixed - Sticky - Avec Exemples (2021) FR

Поділитися
Вставка
  • Опубліковано 25 лис 2024

КОМЕНТАРІ • 183

  • @nassimback
    @nassimback 3 роки тому +14

    si tu savait combien d'heures j'ai passé en essayant de comprendre ces positions sans résultat !!!! je ne pourrais jamais te remercier assez

    • @NadfriJS
      @NadfriJS  3 роки тому +1

      Très heureux que cette vidéo fut bénéfique pour toi!

  • @morycamara6281
    @morycamara6281 Рік тому +1

    J'ai acheté beaucoup de formations mais, c'est ici que j'ai compris le positionnement en Css. Merci beaucoup!

    • @NadfriJS
      @NadfriJS  Рік тому

      Merci pour ce commentaire, il fait plaisir :)

  • @alex-lbd
    @alex-lbd Рік тому +2

    WOW
    J'ai compris beaucoup de choses avec ton tuto, très simple esthétiquement ce qui fait qu'on ne se perd pas! Pis tes explications sont authentiques, claires, et maîtrisées!
    Merci beaucoup!

  • @everydayquotes10
    @everydayquotes10 6 місяців тому

    Bonjour Monsieur, merci pour ce beau travail que vous aviez décidé de partagé gratuitement avec nous.
    Vous êtes vraiment un pédagogue, vous m'avez non pas simplement aidé à comprendre les produits position de CSS, mais m'aidé également à m'intéresser encore plus au développement Web

    • @NadfriJS
      @NadfriJS  6 місяців тому

      Merci infiniment

  • @arnaudjuet5508
    @arnaudjuet5508 9 місяців тому

    La meilleure explication trouvée sur le web concernant les positions en CSS ! Un grand merci et un grand bravo pour cet excellent tuto !

    • @NadfriJS
      @NadfriJS  8 місяців тому

      Un grand merci !

  • @mrpolo8333
    @mrpolo8333 7 місяців тому

    Vous êtes le meilleur !!! J'ai passé un temps fou sur la propriété sticky sans comprendre pourquoi elle ne fonctionnait pas et vous m'avez parfaitement expliqué pourquoi 😁
    Merci infiniment !!!!!!!!!!

    • @NadfriJS
      @NadfriJS  7 місяців тому

      Merci de votre retour 😊

  • @marye1218
    @marye1218 Рік тому +1

    Merci mille fois pour votre tuto qui est juste génial pour la compréhension des différentes positions ! Bravo pour votre pédagogie !!!

  • @soribakaba7366
    @soribakaba7366 Рік тому +4

    Une très bonne vidéo avec des explications compréhensibles

  • @tessayouaz5968
    @tessayouaz5968 2 роки тому

    je n'arrive pas à croire que c'est aussi simple que ça, je galère avec les postions depuis un moment et cette vidéo est une révélation franchement Bravo!!! je m'abonne

  • @hugor9660
    @hugor9660 2 роки тому

    Enfin quelqu'un qui explique bien. Merci

    • @NadfriJS
      @NadfriJS  2 роки тому

      Merci pour le compliment :)

  • @aissatoubobodiallo2449
    @aissatoubobodiallo2449 Рік тому

    J’ai finalement compris les positions CSS. Et ce, grâce à vous Merci 🙏

  • @vincentfaridmaalem2287
    @vincentfaridmaalem2287 8 місяців тому

    Il me faut des profs comme vous. Je comprends très bien maintenant. Merci beaucoup.

    • @NadfriJS
      @NadfriJS  8 місяців тому

      Merci à vous

  • @floriangasparine4436
    @floriangasparine4436 3 роки тому +2

    J’ai juste envie de te dire un fucking MERCIIII !!! Une explication clair et précise sans fioriture et exemplifier ! Le rêve d’un débutant 😍 Tu as gagné un abonné un like et j’ai activé la cloche 💪🏾

    • @NadfriJS
      @NadfriJS  2 роки тому

      Merci pour ton commentaire :)

  • @shanwazghulam19
    @shanwazghulam19 3 роки тому +1

    Excellente vidéo, c'est vraie que je ne voyais pas la différence entre relative et absolute mais maintenant c'est fait.

    • @nadfri
      @nadfri 3 роки тому

      Merci

    • @NadfriJS
      @NadfriJS  3 роки тому

      Merci beaucoup 🙂

  • @mustaphabousellam746
    @mustaphabousellam746 3 роки тому

    Merci pour cet excellent tutoriel qui pour la première fois m'a permis de comprendre exactement ces différentes positions css

    • @NadfriJS
      @NadfriJS  3 роки тому

      Merci de votre retour

  • @LesAmisDuCoran
    @LesAmisDuCoran Рік тому +1

    11:36 - donc vous comprenez sûrement rien du tout🤣🤣, j'ai aimé 🤣, merci pour l'explication, super claire 😇

  • @audreyvaccaro
    @audreyvaccaro Рік тому

    Un énorme merci!!!! Tellement plus simple à comprendre comme ça que dans la formation que je paye! Je m'abonne DIIIIIIIIIRECT 😀

  • @Boudha_Solo
    @Boudha_Solo 2 роки тому

    Salut, ta vidéo est très bien. Tu es très pédagogue et c'est ce qu'il faut pour un débutant comme moi et grâce toi je vais pouvoir rédiger du code plus propre et plus concis.

    • @NadfriJS
      @NadfriJS  2 роки тому +1

      Merci et bienvenue

  • @CaroFlo0410
    @CaroFlo0410 Рік тому

    Enfin des explications claires ! Je ne comprenais pas tout dans la documentation. Bravo et merci pour cette vidéo, je m'abonne à votre chaine, bonne continuation à vous :)

    • @NadfriJS
      @NadfriJS  Рік тому

      Merci pour ton commentaire :)

  • @malouette3991
    @malouette3991 2 роки тому

    Excellent !! C'est la seule explication que j'ai vraiment comprise.

  • @LolaIsy-j5x
    @LolaIsy-j5x Рік тому

    Merci beaucoup pour ce tutoriel de qualité ! :)
    Vos explications sont super claires, et j'ai pris plaisir à réviser avec votre vidéo. Merci, merci ! :)

  • @Goku-o3x
    @Goku-o3x 2 місяці тому

    Tu sauve la vie bro, un grand Merci... T'as gagné un sub :)

  • @victorassiah4879
    @victorassiah4879 Рік тому

    Superbe tutoriel ; explication très claire et très concise. Merci beaucoup

  • @PainNagato42
    @PainNagato42 3 роки тому +2

    Je connaissais déjà les positions CSS mais merci pour cette révision ;)

  • @daniellucarini870
    @daniellucarini870 2 роки тому

    Enfin un tuto expliqué avec patience et clarté !!

    • @NadfriJS
      @NadfriJS  2 роки тому

      Merci du compliment

  • @mathus1906
    @mathus1906 2 роки тому +1

    Merci pour cette vidéo, c'est pas totalement facile et ta vidéo est très utile pour comprendre :)

    • @NadfriJS
      @NadfriJS  2 роки тому +1

      Avec plaisir 🙂

  • @saoryr2131
    @saoryr2131 Рік тому

    Merci beaucoup pour cette vidéo. Elle m'a bien aidé pour mon projet de creation de pop up 👍👍

  • @misusvde7942
    @misusvde7942 2 роки тому

    Whaou ! superbe tuto. Tellement bien expliqué et montré , merci bcp !

  • @jawadach
    @jawadach 3 роки тому +1

    Bravo, j'ai bien aimé les explications, sont très claires … un grand Merci

    • @NadfriJS
      @NadfriJS  3 роки тому

      Merci à toi pour ton commentaire ;)

  • @AlexandreCalmels
    @AlexandreCalmels Рік тому

    Merci pour ton travail !
    Tu m'as beaucoup aidé pour comprendre et bien utiliser les positions absolute et relative ;)

  • @DanielDarreau
    @DanielDarreau 4 місяці тому +1

    je découvre cette excellente vidéo merci

  • @meyous-coder
    @meyous-coder Рік тому

    merci surtout pour la position relative du parent. c'était toujours flou

  • @isaack1579
    @isaack1579 Рік тому

    Salut et grand merci pour cette vidéo sa m'a vraiment. Bonne continuation, un abonné de plus

  • @smockydedaly
    @smockydedaly 2 роки тому

    C'est vraiment super et magnifique.
    Felicitation

    • @NadfriJS
      @NadfriJS  2 роки тому

      Oh merci beaucoup !

  • @lydia1136
    @lydia1136 Рік тому +1

    plus que magnifique vraiment merciiii beaucouppp de la part d une algeriennne merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

    • @NadfriJS
      @NadfriJS  Рік тому +1

      Merci infiniment

    • @lydia1136
      @lydia1136 Рік тому

      @@NadfriJS c'est la moindre des choses

  • @jocelynpater4754
    @jocelynpater4754 2 роки тому

    Merci pour ce super top vidéo sur les positions. Bonne continuation et surtout la santé pour toujours.

    • @NadfriJS
      @NadfriJS  2 роки тому

      Merci, la santé pour toujours je prends :)

  • @romainciszewicz7779
    @romainciszewicz7779 2 роки тому

    Franchement félicitations pour tes explications , super professeur je like et je m'abonne.

    • @NadfriJS
      @NadfriJS  2 роки тому

      Merci et bienvenue

  • @gonmk5361
    @gonmk5361 2 роки тому

    Très bien expliqué !! Merci pour ton tuto de qualité.

  • @raazyaa
    @raazyaa Рік тому

    Top vidéo pour comprendre les positions !!!

  • @youssoufmeite4693
    @youssoufmeite4693 2 роки тому

    Wahou c'est aujourd'hui que j'ai vraiment compris merci

  • @naudz7
    @naudz7 Рік тому

    Merci pour ta vidéo ! Les explications sont top ✌

  • @asphaltking5870
    @asphaltking5870 Рік тому +1

    Très clair !!

  • @mohamedlegtibi802
    @mohamedlegtibi802 2 роки тому

    Video bien expliquée. Grâce à toi j'ai bien compris les positions. +1 abonné

  • @timgadoaliinone6908
    @timgadoaliinone6908 Місяць тому

    bravo , bien expliqué

  • @cerisen
    @cerisen Рік тому

    Une vidéo super top bien expliqué j'ai enfin compris MERCI merciiiiii et bien sur je m' habonne

  • @francoismonfret8108
    @francoismonfret8108 3 місяці тому

    merci beaucoup monsieur

  • @mayerzrl
    @mayerzrl 2 роки тому

    Cette vidéo est top ! Merci à vous

    • @NadfriJS
      @NadfriJS  2 роки тому

      Merci pour le commentaire :)

  • @ericerac4928
    @ericerac4928 Рік тому

    Super bien ton tuto et trés facile à comprendre. Petite correction qui n'a rien à voir avec les positions mais le lorem ipsum n'est pas un text aléatoire, il sagit d'un texte extrait en partit d'une oeuvre de Cicéron et surtout utilisé pour les d'essai d'imprimerie à partir du XVIe siècle. Voilà, et je me répète, ton tuto est bien fait.

    • @NadfriJS
      @NadfriJS  Рік тому

      Merci pour cette info que je ne connaissais pas ;)

  • @romero1745
    @romero1745 Рік тому

    Génial pour tes explications.
    Merci pour tes contenus :)

  • @elhadjtuto1644
    @elhadjtuto1644 7 днів тому

    merci bcp c'est trés claire

  • @imbackforevre4089
    @imbackforevre4089 2 роки тому

    merci tres simple et tres efficace

  • @nicolassoulerot4169
    @nicolassoulerot4169 2 роки тому

    Excellent, bonnes explications !!

  • @karimboussakri2186
    @karimboussakri2186 Рік тому

    super propre 💪

  • @mourirderire1400
    @mourirderire1400 2 роки тому

    Très bien expliqué !!!!

  • @alfredkuate9370
    @alfredkuate9370 2 роки тому

    Tres bien expliqué, vraiment je comprennais pas tres bien cette notion!!!
    Est ce que ta fais une video qui explique les flexbox????

    • @NadfriJS
      @NadfriJS  2 роки тому

      Merci, j'ai pas fait de videos sur flex du fait qu'on en trouve pas mal sur youtube, mais si tu veux en savoir plus, regarde mes videos de tutos complets, faire une navbar responsive ou une todo list de A à Z, j'explique ces concepts

  • @klemdev6640
    @klemdev6640 2 роки тому

    super video !!! c'est très bien expliqué.

    • @NadfriJS
      @NadfriJS  2 роки тому

      Merci beaucoup 🙂

  • @rachiid0074
    @rachiid0074 2 роки тому

    Très bonne vidéo !!! Merciii 😜

  • @abderrahmaneaitallaoua6023
    @abderrahmaneaitallaoua6023 2 роки тому

    très clair, merci.

  • @plexussolair7716
    @plexussolair7716 2 роки тому

    Merci.

  • @tribgraal
    @tribgraal 2 роки тому

    Merci pour ta vidéo !

  • @theryphil
    @theryphil Рік тому

    très bonne vidéo félicitation

  • @MFRDeLaVega91
    @MFRDeLaVega91 3 роки тому

    Bravo ! Super vidéo nécessaire

  • @houssenranivoson2593
    @houssenranivoson2593 2 роки тому

    Merci !

  • @So-BTZ
    @So-BTZ Рік тому

    Merci infiniment !!

  • @sihemtoutsimplement6616
    @sihemtoutsimplement6616 3 роки тому

    Merci beaucoup , très utile !

  • @adsiassicmsd
    @adsiassicmsd Рік тому

    merci !

  • @BenjaminAISHI-pf8rz
    @BenjaminAISHI-pf8rz Рік тому

    Merci beaucoup

  • @charleskouakou6908
    @charleskouakou6908 2 роки тому

    merci beaucoup pour cette video

  • @saidhamani827
    @saidhamani827 2 роки тому

    Perfect. Thanks

  • @limaks8761
    @limaks8761 2 роки тому

    SUPER

  • @bleuechabani1863
    @bleuechabani1863 2 роки тому

    merci pour les vidéos

  • @gatessassistance3060
    @gatessassistance3060 9 місяців тому

    merci

    • @NadfriJS
      @NadfriJS  8 місяців тому

      Avec plaisir

  • @bloullittaa
    @bloullittaa 2 роки тому

    Merci j'adore

    • @NadfriJS
      @NadfriJS  2 роки тому +1

      Merci pour ton commentaire :)

    • @bloullittaa
      @bloullittaa 2 роки тому

      @@NadfriJS franchement trop bien expliqué, j'ai une évaluation en html css après demain grâce à ta vidéo je suis plus rassurée

  • @rachidbenanin4780
    @rachidbenanin4780 Рік тому

    C est super merci bcp

  • @rcytv9613
    @rcytv9613 3 роки тому +1

    Merci beaucoup pour les vidéos , c'est super !
    Aurais tu des conseils concernant le syndrome de la page blanche au niveau algo?
    Pouce bleu!

    • @NadfriJS
      @NadfriJS  3 роки тому +2

      Merci, je donne quelques conseils sur l'algo dans mes vidéos correction de codinGame. Mais la règle c'est de prendre un crayon et un papier, et de noter étape par étape le raisonnement naturel du cerveau pour résoudre un problème. Une fois les étapes identifiées, tu les écris en code sans optimisation. A ce moment, tu vas remarquer que tu te répètes dans le code, et qu'une boucle serait plus judicieuse à tel endroit, puis quand ton code fonctionne, tu vas remarquer automatiquement que tu peux encore réduire la taille du code à tel ou tel endroit, puis à la fin ton code ne fera plus que quelques lignes.

    • @rcytv9613
      @rcytv9613 3 роки тому

      @@NadfriJS Merci , je vais essayer d'appliquer tes conseils !

  • @Shakurjor
    @Shakurjor 6 місяців тому

    Salut merci pour ces explications, j'aimerais une confirmation, le conteneur c'est bien une div dans ton cas?

    • @NadfriJS
      @NadfriJS  6 місяців тому

      Oui c'est ça

  • @alhassanebah7607
    @alhassanebah7607 Рік тому

    merci beacoup

  • @cog969
    @cog969 2 роки тому

    merci à vous ;)

  • @yathergame279
    @yathergame279 3 роки тому +1

    On est d'accord que si on met notre nav bar avec comme propriété position:fixed; la nav bar va passer au-dessus du titre du site. Mais il n'y aurait pas moyen de contourner ce problème avec la propriété z-index comme vous l'avez expliquez ? Avec la propriété z-index, en mettant z-index:1; pour le titre et z-index:0; pour la nav bar, elle passera en dessous du texte nan ? Simple curiosité (sinon très bonne vidéo, en tant que débutant, votre vidéo ma très bien éclairci sur le sujet !)

    • @NadfriJS
      @NadfriJS  3 роки тому

      Oui c'est possible, mais je ne pense pas que le résultat sera très esthétique ;)

    • @yathergame279
      @yathergame279 3 роки тому

      @@NadfriJS D'accord, merci !

  • @AsseveratecyprusMouyamba-hh3cx
    @AsseveratecyprusMouyamba-hh3cx 9 місяців тому

    Bonjour ! J' aimerais savoir comment vous avez fait pour séparer les contraires de part et d' autres ?

    • @NadfriJS
      @NadfriJS  8 місяців тому

      J'ai pas bien compris la question 🤔

  • @oredytech
    @oredytech 6 місяців тому

    Je penses que sticky n'a pas fonctionner au début parce que son container à une position relative. Il faudrait donc enlever la position du container.

  • @djamal01010
    @djamal01010 10 місяців тому

    J'ai une question a propos du containers(parent) et de la positions absolue il faut qu'il soit absolument dans le containers(parent) si il est en dehors du containers dans ce cas la il prend toute la page c'est ça ???

    • @NadfriJS
      @NadfriJS  10 місяців тому

      Ca va remonter parent par parent jusqu'à en trouver un ayant une position relative, s'il ne trouve rien, alors le parent c'est body. L'element en absolute se positionne par rapport au 1er parent ayant une position relative, sinon c'est body par defaut.

  • @charlesenglebert8226
    @charlesenglebert8226 2 роки тому

    et ça fait quoi top, left par rapport à margin-top, margin-left ?

    • @NadfriJS
      @NadfriJS  2 роки тому

      Avec les margins, tu vas pousser tous les elements qui sont autour, tandis que top,left,right,bottom te permettent de faire des superpositions.

  • @all-habibmohamed8058
    @all-habibmohamed8058 3 роки тому

    Merci mais comment positionner le menu en haut a droite de mon site Web.

    • @NadfriJS
      @NadfriJS  3 роки тому

      Regarde mon tuto sur faire un site responsive avec navBar

  • @gargouillestudiofx
    @gargouillestudiofx 3 роки тому

    salut, un grand, grand merci pour cette vidéo très bien faite, enfin je vais pouvoir avancer un peu sur les positions !!, juste une petite question...à quel moment serait il plus adéquat d'utiliser ' position: fixed ' ?. Encore merci !!!!

    • @NadfriJS
      @NadfriJS  3 роки тому

      Salut, je dirais lorsqu'on a à fixer un élément à une autre position que Top, par exemple un menu en bas de l'écran, ou un icon de scroll sur le coté par exemple

  • @sadouadama9953
    @sadouadama9953 2 роки тому

    merci pour la vidéo.en passant j'ai pas pigé une chose.le terme box dans css je ne le voix pas dans la page html.merci !

    • @NadfriJS
      @NadfriJS  2 роки тому +1

      Salut, c'et juste une classe CSS, elle sert à styliser mes divs (ici un carré avec un contenu centré)

    • @sadouadama9953
      @sadouadama9953 2 роки тому

      J'ai pas compris ton explication mais c'est bon a travers des test j'ai compris

  • @a9darrouh132
    @a9darrouh132 3 роки тому

    Merci beaucoup. j'espère que vous allez faire de transformer un site static vers dynamic avec php et bonne continuation ❤️❤️❤️

    • @NadfriJS
      @NadfriJS  3 роки тому

      Je ne fais pas du PHP, je suis plutot sur React en ce moment, mais voici une super chaine pour le PHP, les teachers du web
      ua-cam.com/channels/zuaB4F2znrMggxcwUuVhAw.html

    • @a9darrouh132
      @a9darrouh132 3 роки тому

      @@NadfriJS je trouve seulement que des cours du java et autres cours 😔

    • @NadfriJS
      @NadfriJS  3 роки тому

      @@a9darrouh132 PHP ca s'utilise avec des framework, il y en 2 connus, laravel et Symphony. La tu verras plein de cours dessus.

    • @a9darrouh132
      @a9darrouh132 3 роки тому

      @@NadfriJS Je veux convertir un site statique en site dynamique permettant aux visiteurs de laisser leurs commentaires et de me contacter via leurs commentaires mais je ne sais pas quel est le langage que je dois l'utiliser ?

    • @NadfriJS
      @NadfriJS  3 роки тому +1

      @@a9darrouh132 Je pense que le plus simple est avec PHP et une base de donnée MYSQL. Essaie ce cours :
      ua-cam.com/video/X2Apw1CDDJQ/v-deo.html

  • @nukken
    @nukken 3 роки тому

    Merci pour cette super vidéo je débute et tu m'as appris beaucoup de code, j'ai une question. Quand je mets dans mon un button, comment je change sa taille?

    • @NadfriJS
      @NadfriJS  3 роки тому

      Salut, viens nous rejoindre sur mon discord, ca sera plus facile de repondre à tes questions, le lien est dans la description

  • @sadouadama9953
    @sadouadama9953 2 роки тому

    et aussi quel est l'importance de la position static

    • @NadfriJS
      @NadfriJS  2 роки тому +1

      C'est la valeur par defaut quand tu mets rien. Pas vraiment d'interet en soit, sauf dans de rare cas pour des animations CSS ou tu passes d'une position fixed à static par exemple.

    • @sadouadama9953
      @sadouadama9953 2 роки тому

      @@NadfriJS merci beaucoup.si tu avait un blog je serais le premier.j'aime les réponses claires et instantané

  • @mimounkada5271
    @mimounkada5271 3 роки тому

    👍🏻👍🏻👍🏻

  • @dukenuggets
    @dukenuggets Рік тому

    le sticky c'est débordant ce que tu ne dis pas, si tu met par exemple un translate pour cacher un élément tu verra le scroll horizontal et ça et c'est moche donc fixed quitte a mettre un margin sur le container c'est mieux.

  • @tilksamousse
    @tilksamousse 2 роки тому

    🤓

  • @philstore788
    @philstore788 Рік тому

    Super vidéo ! J ai tout compris, c est bien détaillé et bien expliqué ! Merci pour le partage

  • @noapage1768
    @noapage1768 7 місяців тому

    Merci