{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/Z-index/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"55508515-5500-5a1c-94c1-ddf80aabe7dc","title":"Tailwind CSS Z-index","slug":"/classes/Z-index/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"lastUpdated\": \"13 May 2024\",\n \"title\": \"Tailwind CSS Z-index\",\n \"metaTitle\": \"Tailwind CSS Z-index\",\n \"metaDescription\": \"The Tailwind z-{index} utility class allows you to control the stacking order of elements using the CSS z-index property.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-z-index\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", null, \"Tailwind Z-index\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"z-{index}\"), \" utility class in Tailwind CSS allows you to control the stacking order of elements using the CSS z-index property. With Tailwind's z-{index} class, you can easily specify the z-index value for an element to determine its vertical position in the stacking order.\"), mdx(\"h2\", null, \"Applying Tailwind Z index\"), mdx(\"p\", null, \"To apply a specific z-index value to an element, you can use the tailwind z-{index} utility class, where {index} represents the desired z-index value. The range of z-index values in Tailwind CSS goes from -1 to 50, with higher values bringing elements closer to the front.\\nHere's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n
\\n 5\\n
\\n
\\n 10\\n
\\n
\\n 20\\n
\\n
\\n\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n className: \"bg-indigo-100 rounded-t-xl p-4 \"\n }, mdx(\"div\", {\n className: \" flex justify-center -space-x-3 text-white font-bold\"\n }, mdx(\"div\", {\n className: \"w-16 h-16 text-white bg-indigo-500 rounded-full text-center flex items-center justify-center shadow-lg z-5 ring-4 ring-white\"\n }, \"5\"), mdx(\"div\", {\n className: \"w-16 h-16 text-white bg-indigo-500 rounded-full text-center flex items-center justify-center shadow-lg z-10 ring-4 ring-white\"\n }, \"10\"), mdx(\"div\", {\n className: \"w-16 h-16 text-white bg-indigo-500 rounded-full text-center flex items-center justify-center shadow-lg z-40 ring-4 ring-white\"\n }, \"20\"))), mdx(\"p\", null, \"In the above example, a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"
\"), \" element is styled with the z-10 class, which sets the z-index value to 10.\"), mdx(\"h2\", null, \"Responsive Tailwind Z-index\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply z-index classes responsively at different breakpoints. To use responsive tailwind z index classes, you can append the breakpoint prefix to the utility class. For example, md:z-20 sets the z-index value to 20 starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"
\\n This element has a z-index value of 10 by default, but starting from the medium breakpoint and\\n above, it changes to 20.\\n
\\n\")), mdx(\"p\", null, \"In the above example, the z-index of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"
\"), \" element is set to 10 by default (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"z-10\"), \"), but starting from the medium breakpoint and above, it changes to 20 (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"md:z-20\"), \").\"), mdx(\"h2\", null, \"Tailwind Z-index Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Class\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Properties\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-index: 0;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-10\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-index: 10;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-20\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-index: 20;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-30\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-index: 30;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-40\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-index: 40;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-50\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-index: 50;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-auto\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"z-index: auto;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://app.windframe.dev/editor?id=header16\"\n }, \"landing page\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-z-index","title":"Tailwind Z-index","items":[{"url":"#applying-tailwind-z-index","title":"Applying Tailwind Z index"},{"url":"#preview","title":"Preview"},{"url":"#responsive-tailwind-z-index","title":"Responsive Tailwind Z-index"},{"url":"#tailwind-z-index-class-table","title":"Tailwind Z-index Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/Z-index.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Z-index","lastUpdated":"13 May 2024","metaDescription":"The Tailwind z-{index} utility class allows you to control the stacking order of elements using the CSS z-index property."}}},"pageContext":{"id":"55508515-5500-5a1c-94c1-ddf80aabe7dc"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}