{"id":5371,"date":"2024-08-27T17:13:37","date_gmt":"2024-08-27T17:13:37","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/positionner-elements-css-precisement\/"},"modified":"2024-08-27T17:13:40","modified_gmt":"2024-08-27T17:13:40","slug":"positionner-elements-css-precisement","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/positionner-elements-css-precisement\/","title":{"rendered":"5.6 Positionner les \u00c9l\u00e9ments en CSS Pr\u00e9cis\u00e9ment"},"content":{"rendered":"\n<p><strong>Positionner les \u00c9l\u00e9ments en CSS<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Ma\u00eetriser l&rsquo;art du positionnement permet de cr\u00e9er des mises en page sophistiqu\u00e9es et des interfaces utilisateur r\u00e9actives. Dans cet article, nous explorerons diff\u00e9rentes techniques pour positionner les \u00e9l\u00e9ments en CSS, \u00e0 travers des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Positionnement en CSS<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586324244?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n\n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de notre offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours CSS complet pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  var iframe = document.getElementById('vimeoPlayer');\n  var player = new Vimeo.Player(iframe);\n  var isPopupDisplayed = false;\n\n  player.on('play', function() {\n      if (!isPopupDisplayed) {\n          player.on('timeupdate', function(data) {\n              if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                  \/\/ Pause the video and display the popup\n                  player.pause().then(function() {\n                    if (window.innerWidth > 768) {\n                      document.querySelector('.desktop-popup').style.display = 'block';\n                    } else {\n                      document.querySelector('.mobile-popup').style.display = 'block';\n                    }\n                    fetchPriceAndUpdatePopup();\n                    isPopupDisplayed = true;\n                  });\n              }\n          });\n      }\n  });\n\n  function fetchPriceAndUpdatePopup() {\n      fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141')\n          .then(response => response.text())\n          .then(html => {\n              var parser = new DOMParser();\n              var fetchedDoc = parser.parseFromString(html, 'text\/html');\n              var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n              var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n              var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n              var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n              document.getElementById('price').textContent = price;\n              document.getElementById('priceMobile').textContent = price;\n              document.querySelector('.desktop-popup del').textContent = originalPrice;\n              document.querySelector('.mobile-popup del').textContent = originalPrice;\n          })\n          .catch(error => console.error('Error fetching the price:', error));\n  }\n\n  function closePopup() {\n      document.querySelector('.desktop-popup').style.display = 'none';\n      document.querySelector('.mobile-popup').style.display = 'none';\n      player.play(); \/\/ Allows resuming the video only after closing the popup\n  }\n});\n<\/script>\n\n\n\n<p>Le positionnement en CSS permet de contr\u00f4ler la mani\u00e8re dont les \u00e9l\u00e9ments sont plac\u00e9s dans le document. CSS offre plusieurs options pour positionner les \u00e9l\u00e9ments, notamment via des attributs comme <code>position<\/code>, <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code>, et <code>left<\/code>. Explorez avec nous ces diff\u00e9rentes techniques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la Propri\u00e9t\u00e9 <code>position<\/code> en CSS<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>position<\/code> en CSS contr\u00f4le la m\u00e9thode de positionnement utilis\u00e9e pour un \u00e9l\u00e9ment. Les valeurs les plus courantes sont <code>static<\/code>, <code>relative<\/code>, <code>absolute<\/code>, <code>fixed<\/code> et <code>sticky<\/code>. Chacune a son propre comportement en ce qui concerne la disposition de l\u2019\u00e9l\u00e9ment dans le flux du document.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Positionnement statique (par d\u00e9faut) *\/\n.element {\n  position: static;\n}\n\n\/* Positionnement relatif *\/\n.element {\n  position: relative;\n  top: 10px;\n  left: 20px;\n}\n\n\/* Positionnement absolu *\/\n.element {\n  position: absolute;\n  top: 50px;\n  right: 30px;\n}\n\n\/* Positionnement fixe *\/\n.element {\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n}\n\n\/* Positionnement sticky *\/\n.element {\n  position: sticky;\n  top: 0;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples de Positionnement Pr\u00e9cis en CSS<\/h3>\n\n\n\n<p>Voyons comment appliquer ces diff\u00e9rentes propri\u00e9t\u00e9s de positionnement \u00e0 des \u00e9l\u00e9ments concrets de notre page web. Pour en savoir plus sur la cr\u00e9ation de pages HTML de base, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">tutoriel sur la premi\u00e8re page HTML<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"fr\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Positionnement en CSS&lt;\/title&gt;\n  &lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n  &lt;div class=\"static\"&gt;\u00c9l\u00e9ment Statique&lt;\/div&gt;\n  &lt;div class=\"relative\"&gt;\u00c9l\u00e9ment Relatif&lt;\/div&gt;\n  &lt;div class=\"absolute\"&gt;\u00c9l\u00e9ment Absolu&lt;\/div&gt;\n  &lt;div class=\"fixed\"&gt;\u00c9l\u00e9ment Fixe&lt;\/div&gt;\n  &lt;div class=\"sticky\" style=\"margin-top: 100px;\"&gt;\u00c9l\u00e9ment Collant&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n  display: grid;\n  gap: 20px;\n  padding: 50px;\n  font-family: Arial, sans-serif;\n}\n\n.static {\n  position: static;\n  background-color: #EDF2F4;\n  padding: 10px;\n}\n\n.relative {\n  position: relative;\n  top: 20px;\n  left: 30px;\n  background-color: #8D99AE;\n  padding: 10px;\n}\n\n.absolute {\n  position: absolute;\n  top: 50px;\n  right: 50px;\n  background-color: #EF233C;\n  padding: 10px;\n}\n\n.fixed {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n  background-color: #D90429;\n  padding: 10px;\n}\n\n.sticky {\n  position: sticky;\n  top: 0;\n  background-color: #2B2D42;\n  color: #FFF;\n  padding: 10px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Flexbox et Grid pour un Positionnement Avanc\u00e9<\/h3>\n\n\n\n<p>En plus de <code>position<\/code>, CSS propose des syst\u00e8mes de mise en page plus sophistiqu\u00e9s comme Flexbox et CSS Grid. Ces m\u00e9thodes facilitent la cr\u00e9ation de mises en page complexes et r\u00e9actives. D\u00e9couvrez comment ajouter des <a href=\"https:\/\/wikiform.fr\/codespace\/medias-video-audio-html-guide\" target=\"_blank\" rel=\"noopener\">m\u00e9dias vid\u00e9o et audio<\/a> pour enrichir vos pages web.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Exemple de Flexbox<\/h4>\n\n\n\n<p>Flexbox est parfait pour disposer des \u00e9l\u00e9ments dans une direction donn\u00e9e. Voici comment cr\u00e9er une disposition simple avec Flexbox :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"flex-container\"&gt;\n  &lt;div class=\"flex-item\"&gt;1&lt;\/div&gt;\n  &lt;div class=\"flex-item\"&gt;2&lt;\/div&gt;\n  &lt;div class=\"flex-item\"&gt;3&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.flex-container {\n  display: flex;\n  justify-content: space-around;\n  background-color: #f4f4f4;\n  padding: 10px;\n}\n\n.flex-item {\n  background-color: #8D99AE;\n  padding: 20px;\n  margin: 5px;\n  text-align: center;\n  color: white;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Exemple de CSS Grid<\/h4>\n\n\n\n<p>CSS Grid est une m\u00e9thode de mise en page puissante qui permet de cr\u00e9er des grilles bidimensionnelles. Voici un exemple de disposition en grille :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"grid-container\"&gt;\n  &lt;div class=\"grid-item\"&gt;1&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;2&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;3&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;4&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;5&lt;\/div&gt;\n  &lt;div class=\"grid-item\"&gt;6&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n  background-color: #e0e0e0;\n  padding: 10px;\n}\n\n.grid-item {\n  background-color: #EF233C;\n  padding: 20px;\n  text-align: center;\n  color: white;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Applications et Bonnes Pratiques<\/h3>\n\n\n\n<p>Le positionnement pr\u00e9cis des \u00e9l\u00e9ments est fondamental pour cr\u00e9er des interfaces utilisateur efficaces. Voici quelques bonnes pratiques \u00e0 garder \u00e0 l&rsquo;esprit :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilisez <code>position: relative;<\/code> lorsque vous devez d\u00e9caler l\u00e9g\u00e8rement un \u00e9l\u00e9ment par rapport \u00e0 sa position par d\u00e9faut.<\/li>\n<li>Employez <code>position: absolute;<\/code> pour retirer un \u00e9l\u00e9ment du flux normal du document et le positionner pr\u00e9cis\u00e9ment par rapport \u00e0 son parent le plus proche.<\/li>\n<li>Optez pour <code>position: fixed;<\/code> pour des \u00e9l\u00e9ments qui doivent rester \u00e0 une position fixe sur l&rsquo;\u00e9cran pendant le d\u00e9filement.<\/li>\n<li>Utilisez Flexbox pour disposer les \u00e9l\u00e9ments en ligne ou colonne de mani\u00e8re flexible et r\u00e9active.<\/li>\n<li>CSS Grid est excellent pour des mises en page en grille plus complexes et bidimensionnelles.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Ma\u00eetriser le <strong>positionnement en CSS<\/strong> est crucial pour tout d\u00e9veloppeur web souhaitant cr\u00e9er des interfaces utilisateur complexes et r\u00e9actives. Que vous utilisiez les propri\u00e9t\u00e9s de position de base ou les mises en page avanc\u00e9es avec Flexbox et CSS Grid, une compr\u00e9hension approfondie de ces techniques vous permettra de concevoir des pages web \u00e9l\u00e9gantes et efficaces. Pour en apprendre davantage, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\">cours complet HTML5 et CSS3<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Ajout de contenu pour atteindre 1200 mots -->\n\n\n<h3 class=\"wp-block-heading\">Compl\u00e9ter vos Connaissances en HTML<\/h3>\n\n\n\n<p>Pour bien positionner les \u00e9l\u00e9ments en CSS, conna\u00eetre les bases du HTML est essentiel. Vous pouvez commencer par explorer les <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\" target=\"_blank\" rel=\"noopener\">bases du langage HTML<\/a>, puis suivre avec la cr\u00e9ation de votre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">premi\u00e8re page HTML<\/a>. Ma\u00eetriser les fondamentaux vous facilitera \u00e9norm\u00e9ment l&rsquo;application des styles et du positionnement en CSS.<\/p>\n\n\n\n<p>Les <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\" target=\"_blank\" rel=\"noopener\">\u00e9l\u00e9ments head<\/a> jouent \u00e9galement un r\u00f4le important en HTML et seront utiles pour une meilleure structuration et positionnement de vos \u00e9l\u00e9ments. Des <a href=\"https:\/\/wikiform.fr\/codespace\/commentaires-html-utilisation\" target=\"_blank\" rel=\"noopener\">commentaires en HTML<\/a> bien plac\u00e9s peuvent faciliter la compr\u00e9hension et la gestion de vos projets","protected":false},"excerpt":{"rendered":"<p>Positionner les \u00c9l\u00e9ments en CSS est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur web. Ma\u00eetriser l&rsquo;art du positionnement permet de cr\u00e9er des mises en page sophistiqu\u00e9es&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2758,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5371","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5371"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5371\/revisions"}],"predecessor-version":[{"id":5372,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5371\/revisions\/5372"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2758"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}