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

Поделиться
HTML-код
  • Опубликовано: 30 сен 2024

Комментарии • 181

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

  • @soribakaba7366
    @soribakaba7366 Год назад +4

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

  • @DanielDarreau
    @DanielDarreau 3 месяца назад +1

    je découvre cette excellente vidéo merci

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

  • @LesAmisDuCoran
    @LesAmisDuCoran Год назад +1

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

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

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

  • @PainNagato42
    @PainNagato42 3 года назад +2

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

    • @NadfriJS
      @NadfriJS  3 года назад

      Avec plaisir 😁

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

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

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

  • @Goku-o3x
    @Goku-o3x Месяц назад

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

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

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

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

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

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

  • @cerisen
    @cerisen Год назад

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

  • @Shakurjor
    @Shakurjor 4 месяца назад

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

    • @NadfriJS
      @NadfriJS  4 месяца назад

      Oui c'est ça

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

  • @asphaltking5870
    @asphaltking5870 Год назад +1

    Très clair !!

  • @francoismonfret8108
    @francoismonfret8108 2 месяца назад

    merci beaucoup monsieur

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

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

  • @isaack1579
    @isaack1579 Год назад

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

  • @tilksamousse
    @tilksamousse Год назад

    🤓

  • @youssoufmeite4693
    @youssoufmeite4693 2 года назад

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

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

  • @limaks8761
    @limaks8761 2 года назад

    SUPER

  • @meyous-coder
    @meyous-coder Год назад

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

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

  • @alhassanebah7607
    @alhassanebah7607 Год назад

    merci beacoup

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

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

  • @noapage1768
    @noapage1768 5 месяцев назад

    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 😊

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

  • @adsiassicmsd
    @adsiassicmsd Год назад

    merci !

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

  • @plexussolair7716
    @plexussolair7716 2 года назад

    Merci.

  • @raazyaa
    @raazyaa Год назад

    Top vidéo pour comprendre les positions !!!

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

  • @houssenranivoson2593
    @houssenranivoson2593 2 года назад

    Merci !

  • @theryphil
    @theryphil Год назад

    très bonne vidéo félicitation

  • @saidhamani827
    @saidhamani827 2 года назад

    Perfect. Thanks

  • @aissatoubobodiallo2449
    @aissatoubobodiallo2449 Год назад

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

  • @rachiid0074
    @rachiid0074 2 года назад

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

    • @NadfriJS
      @NadfriJS  2 года назад

      Avec plaisir 😁

  • @audreyvaccaro
    @audreyvaccaro Год назад

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

  • @vincentfaridmaalem2287
    @vincentfaridmaalem2287 7 месяцев назад

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

    • @NadfriJS
      @NadfriJS  6 месяцев назад

      Merci à vous

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

  • @philstore788
    @philstore788 Год назад

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

  • @malouette3991
    @malouette3991 2 года назад

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

  • @mourirderire1400
    @mourirderire1400 2 года назад

    Très bien expliqué !!!!

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

  • @charleskouakou6908
    @charleskouakou6908 2 года назад

    merci beaucoup pour cette video

  • @imbackforevre4089
    @imbackforevre4089 2 года назад

    merci tres simple et tres efficace

  • @tribgraal
    @tribgraal Год назад

    Merci pour ta vidéo !

  • @mohamedlegtibi802
    @mohamedlegtibi802 2 года назад

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

    • @NadfriJS
      @NadfriJS  2 года назад

      De rien et merci

  • @saoryr2131
    @saoryr2131 Год назад

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

  • @bleuechabani1863
    @bleuechabani1863 2 года назад

    merci pour les vidéos

  • @arnaudjuet5508
    @arnaudjuet5508 7 месяцев назад

    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  6 месяцев назад

      Un grand merci !

  • @AlexandreCalmels
    @AlexandreCalmels Год назад

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

  • @romainciszewicz7779
    @romainciszewicz7779 2 года назад

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

    • @NadfriJS
      @NadfriJS  2 года назад

      Merci et bienvenue

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

  • @abderrahmaneaitallaoua6023
    @abderrahmaneaitallaoua6023 2 года назад

    très clair, merci.

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

  • @rachidbenanin4780
    @rachidbenanin4780 Год назад

    C est super merci bcp

  • @nukken
    @nukken 2 года назад

    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  2 года назад

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

  • @cog969
    @cog969 2 года назад

    merci à vous ;)

    • @NadfriJS
      @NadfriJS  2 года назад

      Avec plaisir 🙂

  • @SofianeBTZ
    @SofianeBTZ Год назад

    Merci infiniment !!

  • @BenjaminAISHI-pf8rz
    @BenjaminAISHI-pf8rz Год назад

    Merci beaucoup

  • @naudz7
    @naudz7 Год назад

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

  • @klemdev6640
    @klemdev6640 2 года назад

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

    • @NadfriJS
      @NadfriJS  2 года назад

      Merci beaucoup 🙂

  • @karimboussakri2186
    @karimboussakri2186 Год назад

    super propre 💪

    • @NadfriJS
      @NadfriJS  11 месяцев назад

      Merci 🤙

  • @smockydedaly
    @smockydedaly 2 года назад

    C'est vraiment super et magnifique.
    Felicitation

    • @NadfriJS
      @NadfriJS  2 года назад

      Oh merci beaucoup !

  • @misusvde7942
    @misusvde7942 2 года назад

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

    • @NadfriJS
      @NadfriJS  2 года назад

      Merci à toi 😊

  • @mimounkada5271
    @mimounkada5271 3 года назад

    👍🏻👍🏻👍🏻

  • @gatessassistance3060
    @gatessassistance3060 7 месяцев назад

    merci

    • @NadfriJS
      @NadfriJS  6 месяцев назад

      Avec plaisir

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

  • @victorassiah4879
    @victorassiah4879 Год назад

    Superbe tutoriel ; explication très claire et très concise. 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

  • @romero1745
    @romero1745 Год назад

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

  • @gonmk5361
    @gonmk5361 2 года назад

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

    • @NadfriJS
      @NadfriJS  2 года назад

      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

  • @nicolassoulerot4169
    @nicolassoulerot4169 2 года назад

    Excellent, bonnes explications !!

    • @NadfriJS
      @NadfriJS  2 года назад

      Un grand merci !

  • @mayerzrl
    @mayerzrl 2 года назад

    Cette vidéo est top ! Merci à vous

    • @NadfriJS
      @NadfriJS  2 года назад

      Merci pour le commentaire :)

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

  • @MFRDeLaVega91
    @MFRDeLaVega91 3 года назад

    Bravo ! Super vidéo nécessaire

  • @hugor9660
    @hugor9660 2 года назад

    Enfin quelqu'un qui explique bien. Merci

    • @NadfriJS
      @NadfriJS  2 года назад

      Merci pour le compliment :)

  • @daniellucarini870
    @daniellucarini870 2 года назад

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

    • @NadfriJS
      @NadfriJS  2 года назад

      Merci du compliment

  • @sihemtoutsimplement6616
    @sihemtoutsimplement6616 3 года назад

    Merci beaucoup , très utile !

  • @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
      ruclips.net/channel/UCzuaB4F2znrMggxcwUuVhAw

    • @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 :
      ruclips.net/video/X2Apw1CDDJQ/видео.html