{"id":5373,"date":"2024-08-27T17:17:22","date_gmt":"2024-08-27T17:17:22","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ordre-couches-css-utiliser-z-index\/"},"modified":"2024-08-27T17:17:25","modified_gmt":"2024-08-27T17:17:25","slug":"ordre-couches-css-utiliser-z-index","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ordre-couches-css-utiliser-z-index\/","title":{"rendered":"5.7 Ordre des Couches en CSS : Utiliser z-index"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Le z-index en CSS<\/strong> joue un r\u00f4le crucial dans la gestion de l&rsquo;ordre des couches lorsque des \u00e9l\u00e9ments se superposent. Comprendre comment utiliser le <strong>z-index en CSS<\/strong> peut am\u00e9liorer consid\u00e9rablement la pr\u00e9sentation visuelle et l&rsquo;interactivit\u00e9 de vos sites web. Apprenons comment il fonctionne et comment l&rsquo;impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>z-index 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\/586330445?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 l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours 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\/devenir-un-d%C3%A9veloppeur-python\/144')\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<div id=\"imageContainer\" style=\"position: relative; height: 400px; background: #f0f0f0;\">\n  <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/800x400?text=Background+Image\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\" alt=\"Background Image\" title=\"\">\n  <div id=\"textContent\" style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.7); padding: 20px; border-radius: 10px; color: #fff;\">\n    <h2 style=\"margin: 0;\">Texte sur l&rsquo;image<\/h2>\n    <p>Utilisation de z-index pour positionner le texte devant l&rsquo;image.<\/p>\n  <\/div>\n<\/div>\n\n\n\n<p>Le z-index en CSS permet de g\u00e9rer l&#8217;empilement des \u00e9l\u00e9ments de votre page web. Lorsque vous avez des \u00e9l\u00e9ments qui se chevauchent, le z-index d\u00e9termine quels \u00e9l\u00e9ments se trouvent devant ou derri\u00e8re. Un \u00e9l\u00e9ment avec un z-index plus \u00e9lev\u00e9 se trouvera devant un \u00e9l\u00e9ment avec un z-index plus bas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre les Concepts de Base du z-index<\/h3>\n\n\n\n<p>Le z-index ne fonctionne que sur des \u00e9l\u00e9ments positionn\u00e9s, c&rsquo;est-\u00e0-dire des \u00e9l\u00e9ments avec une position diff\u00e9rente de static. Les valeurs de z-index peuvent \u00eatre positives ou n\u00e9gatives et d\u00e9finissent l&rsquo;ordre d&#8217;empilement dans le contexte de pile de l&rsquo;\u00e9l\u00e9ment parent positionn\u00e9.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Exemple simple de z-index *\/\n.element-1 {\n    position: relative;\n    z-index: 10;\n}\n\n.element-2 {\n    position: relative;\n    z-index: 20;\n}\n\n\/* .element-2 sera au-dessus de .element-1 *\/\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Cas d&rsquo;Utilisation Courants du z-index<\/h3>\n\n\n\n<p>Le z-index est couramment utilis\u00e9 pour g\u00e9rer l&#8217;empilement de nombreux \u00e9l\u00e9ments, tels que des menus d\u00e9roulants, des fen\u00eatres modales, ou m\u00eame des carrousels d&rsquo;images. Voici quelques sc\u00e9narios pratiques pour mieux comprendre son utilisation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Exemple d'un menu d\u00e9roulant *\/\n.menu {\n    position: relative;\n    z-index: 1;\n}\n\n.dropdown {\n    position: absolute;\n    z-index: 10;\n}\n\n\/* Le menu d\u00e9roulant aura un z-index plus \u00e9lev\u00e9 *\/\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des Conflits de z-index<\/h3>\n\n\n\n<p>Parfois, des conflits de z-index peuvent survenir lorsqu&rsquo;il y a diff\u00e9rents contextes de pile. Par exemple, deux \u00e9l\u00e9ments avec des z-index dans des contextes de positionnement diff\u00e9rents. Pour g\u00e9rer ces conflits, vous devez comprendre le contexte de pile.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Conflit de z-index avec diff\u00e9rents contextes de pile *\/\n.parent-1 {\n    position: relative;\n    z-index: 10;\n}\n    .child-1 {\n        position: relative;\n        z-index: 5;\n    }\n\n.parent-2 {\n    position: relative;\n    z-index: 5;\n}\n    .child-2 {\n        position: relative;\n        z-index: 20;\n    }\n\n\/* ici child-2 ne sera pas au-dessus de parent-1 m\u00eame si son z-index est plus \u00e9lev\u00e9 *\/\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser z-index pour Cr\u00e9er une Fen\u00eatre Modale<\/h3>\n\n\n\n<p>Les fen\u00eatres modales sont des exemples parfaits o\u00f9 le z-index est essentiel. Une fen\u00eatre modale doit \u00eatre au-dessus de tous les autres \u00e9l\u00e9ments pour attirer l&rsquo;attention de l&rsquo;utilisateur. Voici comment cr\u00e9er une fen\u00eatre modale avec le z-index :<\/p>\n\n\n\n<div id=\"modalContainer\" style=\"position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center;\">\n  <div id=\"modalContent\" style=\"background-color: #fff; padding: 20px; border-radius: 10px; width: 80%; max-width: 500px;\">\n    <h2 style=\"margin: 0;\">Fen\u00eatre Modale<\/h2>\n    <p>Ceci est une fen\u00eatre modale au-dessus de tout le contenu.<\/p>\n    <button onclick=\"document.getElementById('modalContainer').style.display='none';\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Style CSS pour la fen\u00eatre modale *\/\n#modalContainer {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.5);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    z-index: 1000; \/* s'assurer que le z-index est suffisamment \u00e9lev\u00e9 *\/\n}\n\n#modalContent {\n    background-color: #fff;\n    padding: 20px;\n    border-radius: 10px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Astuces et Bonnes Pratiques pour l&rsquo;utilisation du z-index<\/h3>\n\n\n\n<p>Pour \u00e9viter les complications inutiles avec le z-index, voici quelques bonnes pratiques :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n    <li>Utilisez des valeurs de z-index bien d\u00e9finies pour \u00e9viter les conflits.<\/li>\n    <li>D\u00e9finissez un contexte de pile clair en utilisant les \u00e9l\u00e9ments parents.<\/li>\n    <li>Documentez les valeurs de z-index utilis\u00e9es pour une maintenance plus facile.<\/li>\n<\/ul>\n\n\n\n<p>Par exemple, des syst\u00e8mes bien con\u00e7us peuvent d\u00e9finir des niveaux pour diff\u00e9rents composants UI afin de maintenir une hi\u00e9rarchie claire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* D\u00e9finir des niveaux de z-index pour diff\u00e9rents composants *\/\n$z-index-dropdown: 100;\n$z-index-modal: 1000;\n$z-index-tooltip: 2000;\n\n\/* Utilisation dans le CSS *\/\n.dropdown {\n  z-index: $z-index-dropdown;\n}\n\n.modal {\n  z-index: $z-index-modal;\n}\n\n.tooltip {\n  z-index: $z-index-tooltip;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s et Complexes d&rsquo;utilisation du z-index<\/h3>\n\n\n\n<p>Pour approfondir notre compr\u00e9hension du z-index, voici quelques exemples avanc\u00e9s qui illustrent son utilisation dans des mises en page plus complexes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Gestion des z-index avec des \u00c9l\u00e9ments Enfants Multiples<\/h4>\n\n\n\n<p>Par exemple, dans une application web complexe, vous pouvez avoir des composants comme des fen\u00eatres, des notifications et des dialogues secondaires qui doivent s&#8217;empiler correctement :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* CSS pour des \u00e9l\u00e9ments complexes *\/\n.window {\n  position: relative;\n  z-index: 1;\n}\n\n.notification {\n  position: absolute;\n  top: 20px;\n  right: 20px;\n  z-index: 10;\n}\n\n.dialog {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 20;\n}\n\n\/* Les dialogues auront le z-index le plus \u00e9lev\u00e9 *\/\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9ation d&rsquo;Interfaces R\u00e9actives et Responsives<\/h4>\n\n\n\n<p>Le z-index peut \u00e9galement \u00eatre utilis\u00e9 pour des effets interactifs comme les menus contextuels et les infobulles. Voici un exemple pratique :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Menu contextuel et infobulle *\/\n.context-menu {\n  position: fixed;\n  display: none;\n  z-index: 100;\n  background-color: #fff;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n}\n\n.tooltip {\n  position: absolute;\n  z-index: 200;\n  background-color: #333;\n  color: #fff;\n  padding: 5px;\n  border-radius: 3px;\n}\n\n\/* Afficher le menu contextuel *\/\n.element:hover + .context-menu {\n  display: block;\n}\n\n\/* Afficher l'infobulle *\/\n.element:hover .tooltip {\n  visibility: visible;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Application dans un Projet R\u00e9el<\/h4>\n\n\n\n<p>Pour visualiser l&rsquo;utilisation r\u00e9elle du z-index dans un projet plus complet, imaginons une interface utilisateur pour une application de tableau de bord o\u00f9 les notifications, barres de navigation et fen\u00eatres de confirmation se superposent :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Interface d'une application de tableau de bord *\/\n.navbar {\n  position: fixed;\n  top: 0;\n  width: 100%;\n  z-index: 500;\n}\n\n.sidebar {\n  position: fixed;\n  left: 0;\n  top: 60px; \/* hauteur de la navbar *\/\n  width: 250px;\n  z-index: 400;\n}\n\n.content {\n  margin-left: 260px; \/* largeur de la sidebar *\/\n  margin-top: 60px; \/* hauteur de la navbar *\/\n}\n\n.notification-bar {\n  position: fixed;\n  bottom: 0;\n  width: 100%;\n  z-index: 600;\n}\n\n.confirmation-dialog {\n  position: fixed;\n  z-index: 700;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n<\/code><\/pre>\n\n\n\n<p>En perfectionnant votre compr\u00e9hension du z-index, n&rsquo;h\u00e9sitez pas \u00e0 explorer des ressources externes pour enrichir vos comp\u00e9tences. Par exemple, le <a href=\"https:\/\/css-tricks.com\/\" target=\"_blank\" rel=\"noopener\">site CSS-Tricks<\/a> offre de nombreux articles et trucs sur la gestion des couches en CSS, et le <a href=\"https:\/\/developer","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Le z-index en CSS joue un r\u00f4le crucial dans la gestion de l&rsquo;ordre des couches lorsque des \u00e9l\u00e9ments se superposent. Comprendre comment utiliser le&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2752,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5373","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\/5373","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=5373"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5373\/revisions"}],"predecessor-version":[{"id":5374,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5373\/revisions\/5374"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2752"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}