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

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

КОМЕНТАРІ • 182

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

    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 4 місяці тому

    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  4 місяці тому

      Merci infiniment

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

    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  7 місяців тому

      Un grand merci !

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

    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  5 місяців тому

      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 !!!

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

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

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

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

  • @floriangasparine4436
    @floriangasparine4436 2 роки тому +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 :)

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

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

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

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

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

      Merci à vous

  • @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

  • @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 :)

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

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

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

    Enfin quelqu'un qui explique bien. Merci

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

      Merci pour le compliment :)

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

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

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

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

  • @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

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

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

  • @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

  • @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 ! :)

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

    je découvre cette excellente vidéo merci

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

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

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

      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

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

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

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

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

  • @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 ;)

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

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

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

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

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

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

  • @timgadoaliinone6908
    @timgadoaliinone6908 4 дні тому

    bravo , bien expliqué

  • @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 🙂

  • @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 ;)

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

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

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

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

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

      Merci du compliment

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

    Très clair !!

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

    C'est vraiment super et magnifique.
    Felicitation

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

      Oh merci beaucoup !

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

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

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

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

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

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

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

      Merci et bienvenue

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

    Top vidéo pour comprendre les positions !!!

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

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

  • @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 :)

  • @Shakurjor
    @Shakurjor 4 місяці тому

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

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

    merci beaucoup monsieur

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

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

  • @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

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

    Cette vidéo est top ! Merci à vous

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

      Merci pour le commentaire :)

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

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

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

    super propre 💪

  • @rcytv9613
    @rcytv9613 2 роки тому +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  2 роки тому +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 2 роки тому

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

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

    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  2 роки тому

      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

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

    merci tres simple et tres efficace

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

    Très bien expliqué !!!!

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

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

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

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

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

    Merci

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

    très bonne vidéo félicitation

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

    très clair, merci.

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

    Merci.

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

    Excellent, bonnes explications !!

  • @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 !

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

    Merci pour ta vidéo !

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

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

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

      Merci beaucoup 🙂

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

    Merci !

  • @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

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

    Merci infiniment !!

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

    Perfect. Thanks

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

    Bravo ! Super vidéo nécessaire

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

    Merci beaucoup

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

    merci !

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

    merci beaucoup pour cette video

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

    merci pour les vidéos

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

    SUPER

  • @oredytech
    @oredytech 4 місяці тому

    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.

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

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

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

      J'ai pas bien compris la question 🤔

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

    Merci beaucoup , très utile !

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

    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  9 місяців тому

      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.

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

    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  Рік тому +1

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

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

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

  • @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

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

    merci beacoup

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

    merci à vous ;)

  • @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

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

    👍🏻👍🏻👍🏻

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

    et aussi quel est l'importance de la position static

    • @NadfriJS
      @NadfriJS  Рік тому +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 Рік тому

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

  • @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

  • @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 Рік тому

    🤓

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

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

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

    merci

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

      Avec plaisir