text: (self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8721],{21370:function(a,b){"use strict";b.Z="/_next/static/media/social-square.b622e290e82093c36cca57092ffe494f.jpg"},22939:function(a,b,c){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/position",function(){return c(23158)}])},23158:function(a,b,c){"use strict";c.r(b),c.d(b,{"default":function(){return o}}),c(67294);var d=c(3905);c(41664);var e=c(5679),f=c(83434),g=c(53339),h=c(50156),i=c(74565),j=c(68143),k=g.DocumentationLayout,l=function(a){return console.warn("Component Heading was not imported, exported, or provided by MDXProvider as global scope"),(0,d.mdx)("div",Object.assign({},a))},m={Layout:k,classes:{utilities:{".static":{position:"static"},".fixed":{position:"fixed"},".absolute":{position:"absolute"},".relative":{position:"relative"},".sticky":{position:"sticky"}}},meta:{title:"Position",description:"Utilities for controlling how an element is positioned in the DOM."},slug:"position",tableOfContents:[{title:"Basic usage",slug:"basic-usage",children:[{title:"Statically positioning elements",slug:"statically-positioning-elements",children:[]},{title:"Relatively positioning elements",slug:"relatively-positioning-elements",children:[]},{title:"Absolutely positioning elements",slug:"absolutely-positioning-elements",children:[]},{title:"Fixed positioning elements",slug:"fixed-positioning-elements",children:[]},{title:"Sticky positioning elements",slug:"sticky-positioning-elements",children:[]}]},{title:"Applying conditionally",slug:"applying-conditionally",children:[{title:"Hover, focus, and other states",slug:"hover-focus-and-other-states",children:[]},{title:"Breakpoints and media queries",slug:"breakpoints-and-media-queries",children:[]}]}]},n=h.ContentsLayout;function o(a){var b=a.components,c=function(a,b){if(null==a)return{};var c,d,e=function(a,b){if(null==a)return{};var c,d,e={},f=Object.keys(a);for(d=0;d<f.length;d++)c=f[d],b.indexOf(c)>=0||(e[c]=a[c]);return e}(a,b);if(Object.getOwnPropertySymbols){var f=Object.getOwnPropertySymbols(a);for(d=0;d<f.length;d++)c=f[d],!(b.indexOf(c)>=0)&&Object.prototype.propertyIsEnumerable.call(a,c)&&(e[c]=a[c])}return e}(a,["components"]);return(0,d.mdx)(n,Object.assign({},m,c,{components:b,mdxType:"MDXLayout"}),(0,d.mdx)(e.Heading,{level:2,id:"basic-usage",nextElement:{type:"heading",depth:3}},"Basic usage"),(0,d.mdx)(e.Heading,{level:3,id:"statically-positioning-elements",nextElement:{type:"paragraph"}},"Statically positioning elements"),(0,d.mdx)("p",null,"Use ",(0,d.mdx)("inlineCode",{parentName:"p"},"static")," to position an element according to the normal flow of the document."),(0,d.mdx)("p",null,"Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children."),(0,d.mdx)(f.e,{containerClassName:"mt-4 -mb-3",html:"\n  <div class=\"relative text-sm font-medium leading-6\">\n    <div class=\"bg-purple-400/20 border border-purple-700/10 rounded-lg p-4\">\n      <div class=\"static bg-purple-400/20 border border-purple-700/10 p-4 h-32\">\n        <p class=\"text-purple-700\">Static parent</p>\n        <div class=\"absolute bottom-0 left-0 bg-purple-500 shadow-lg rounded-lg p-4 text-white\">\n          <p>Absolute child</p>\n        </div>\n      </div>\n    </div>\n  </div>\n"}),(0,d.mdx)("pre",Object.assign({},{className:"language-html"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"static")," ...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Static parent",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"absolute bottom-0 left-0 ...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Absolute child",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,d.mdx)(e.Heading,{level:3,id:"relatively-positioning-elements",nextElement:{type:"paragraph"}},"Relatively positioning elements"),(0,d.mdx)("p",null,"Use ",(0,d.mdx)("inlineCode",{parentName:"p"},"relative")," to position an element according to the normal flow of the document."),(0,d.mdx)("p",null,"Offsets are calculated relative to the element’s normal position and the element ",(0,d.mdx)("em",{parentName:"p"},"will")," act as a position reference for absolutely positioned children."),(0,d.mdx)(f.e,{containerClassName:"mt-4 -mb-3",html:"\n  <div class=\"relative text-sm font-medium leading-6\">\n    <div class=\"bg-sky-400/20 border border-sky-700/10 rounded-lg p-4\">\n      <div class=\"relative bg-sky-400/20 border border-sky-700/10 p-4 h-32\">\n        <p class=\"text-sky-700\">Relative parent</p>\n        <div class=\"absolute bottom-0 left-0 bg-sky-500 shadow-lg rounded-lg p-4 text-white\">\n          <p>Absolute child</p>\n        </div>\n      </div>\n    </div>\n  </div>\n"}),(0,d.mdx)("pre",Object.assign({},{className:"language-html"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"relative")," ...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Relative parent",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"absolute bottom-0 left-0 ...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Absolute child",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,d.mdx)(e.Heading,{level:3,id:"absolutely-positioning-elements",nextElement:{type:"paragraph"}},"Absolutely positioning elements"),(0,d.mdx)("p",null,"Use ",(0,d.mdx)("inlineCode",{parentName:"p"},"absolute")," to position an element ",(0,d.mdx)("em",{parentName:"p"},"outside")," of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist."),(0,d.mdx)("p",null,"Offsets are calculated relative to the nearest parent that has a position other than ",(0,d.mdx)("inlineCode",{parentName:"p"},"static"),", and the element ",(0,d.mdx)("em",{parentName:"p"},"will")," act as a position reference for other absolutely positioned children."),(0,d.mdx)(f.e,{containerClassName:"mt-4 -mb-3",html:"\n  <div class=\"space-y-8\">\n    <div>\n      <p class=\"text-sm text-gray-500 font-medium mb-4\">With static positioning</p>\n      <div class=\"relative text-sm font-medium leading-6\">\n        <div class=\"relative bg-indigo-400/20 border border-indigo-700/10 rounded-lg p-4\">\n          <p class=\"text-indigo-700 -mt-2 mb-2\">Relative parent</p>\n          <div class=\"static bg-indigo-400/20 border border-indigo-700/10 p-4 h-32 flex flex-col justify-between\">\n            <p class=\"text-indigo-700\">Static parent</p>\n            <div class=\"flex gap-4\">\n              <div class=\" bottom-0 left-0 bg-indigo-500 shadow-lg rounded-lg p-4 text-white\">\n                <p>Static child</p>\n              </div>\n              <div class=\"bg-indigo-100 shadow-lg rounded-lg p-4 text-indigo-600\">\n                <p>Static sibling</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div>\n      <p class=\"text-sm text-gray-500 font-medium mb-4\">With absolute positioning</p>\n      <div class=\"relative text-sm font-medium leading-6\">\n        <div class=\"relative bg-indigo-400/20 border border-indigo-700/10 rounded-lg p-4\">\n          <p class=\"text-indigo-700 -mt-2 mb-2\">Relative parent</p>\n          <div class=\"static bg-indigo-400/20 border border-indigo-700/10 p-4 h-32 flex flex-col justify-between\">\n            <p class=\"text-indigo-700\">Static parent</p>\n            <div class=\"flex gap-4\">\n              <div class=\"absolute top-0 right-0 bg-indigo-500 shadow-lg rounded-lg p-4 text-white\">\n                <p>Absolute child</p>\n              </div>\n              <div class=\"bg-indigo-100 shadow-lg rounded-lg p-4 text-indigo-600\">\n                <p>Static sibling</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n"}),(0,d.mdx)("pre",Object.assign({},{className:"language-html"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"static ...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"<!-- Static parent -->"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"static ...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Static child",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"inline-block ...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Static sibling",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"<!-- Static parent -->"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"absolute")," ...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Absolute child",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"inline-block ...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Static sibling",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"p"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,d.mdx)(e.Heading,{level:3,id:"fixed-positioning-elements",nextElement:{type:"paragraph"}},"Fixed positioning elements"),(0,d.mdx)("p",null,"Use ",(0,d.mdx)("inlineCode",{parentName:"p"},"fixed")," to position an element relative to the browser window."),(0,d.mdx)("p",null,"Offsets are calculated relative to the viewport and the element ",(0,d.mdx)("em",{parentName:"p"},"will")," act as a position reference for absolutely positioned children."),(0,d.mdx)(f.e,{p:"none",containerClassName:"mt-4 -mb-3",html:"\n  <div class=\"px-3\">\n    <div class=\"relative max-w-md mx-auto bg-white shadow-lg h-80 overflow-hidden ring-1 ring-gray-900/5\">\n      <div class=\"absolute top-0 left-0 right-0 px-4 py-3 flex items-center font-semibold text-sm text-gray-900 bg-gray-50/90 backdrop-blur-sm ring-1 ring-gray-900/10\">Contacts</div>\n      <div class=\"overflow-auto flex flex-col divide-y h-80\">\n        <div class=\"flex items-center gap-4 p-4\">\n          <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n          <strong class=\"text-gray-900 text-sm font-medium\">Andrew Alfred</strong>\n        </div>\n        <div class=\"flex items-center gap-4 p-4\">\n          <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n          <strong class=\"text-gray-900 text-sm font-medium\">Debra Houston</strong>\n        </div>\n        <div class=\"flex items-center gap-4 p-4\">\n          <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n          <strong class=\"text-gray-900 text-sm font-medium\">Jane White</strong>\n        </div>\n        <div class=\"flex items-center gap-4 p-4\">\n          <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n          <strong class=\"text-gray-900 text-sm font-medium\">Ray Flint</strong>\n        </div>\n        <div class=\"flex items-center gap-4 p-4\">\n          <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n          <strong class=\"text-gray-900 text-sm font-medium\">Mindy Albrect</strong>\n        </div>\n        <div class=\"flex items-center gap-4 p-4\">\n          <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n          <strong class=\"text-gray-900 text-sm font-medium\">David Arnold</strong>\n        </div>\n      </div>\n    </div>\n  </div>\n"}),(0,d.mdx)("pre",Object.assign({},{className:"language-html"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"relative",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"fixed")," top-0 left-0 right-0",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Contacts",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"img")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"src"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""))," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"/>")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"strong"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Andrew Alfred",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"strong"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"img")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"src"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""))," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"/>")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"strong"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Debra Houston",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"strong"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"<!-- ... -->"),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,d.mdx)(e.Heading,{level:3,id:"sticky-positioning-elements",nextElement:{type:"paragraph"}},"Sticky positioning elements"),(0,d.mdx)("p",null,"Use ",(0,d.mdx)("inlineCode",{parentName:"p"},"sticky")," to position an element as ",(0,d.mdx)("inlineCode",{parentName:"p"},"relative")," until it crosses a specified threshold, then treat it as fixed until its parent is off screen."),(0,d.mdx)("p",null,"Offsets are calculated relative to the element’s normal position and the element ",(0,d.mdx)("em",{parentName:"p"},"will")," act as a position reference for absolutely positioned children."),(0,d.mdx)(f.e,{p:"none",containerClassName:"mt-4 -mb-3",html:"\n  <div class=\"px-3\">\n    <div class=\"relative max-w-md mx-auto bg-white shadow-lg h-80 overflow-auto ring-1 ring-gray-900/5 -my-px\">\n      <div class=\"relative\">\n        <div class=\"sticky top-0 px-4 py-3 flex items-center font-semibold text-sm text-gray-900 bg-gray-50/90 backdrop-blur-sm ring-1 ring-gray-900/10\">A</div>\n        <div class=\"divide-y\">\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Andrew Alfred</strong>\n          </div>\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Aisha Houston</strong>\n          </div>\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Anna White</strong>\n          </div>\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Andy Flint</strong>\n          </div>\n        </div>\n      </div>\n      <div class=\"relative\">\n        <div class=\"sticky top-0 px-4 py-3 flex items-center font-semibold text-sm text-gray-900 bg-gray-50/90 backdrop-blur-sm ring-1 ring-gray-900/10\">B</div>\n        <div class=\"divide-y\">\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Bob Alfred</strong>\n          </div>\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Bianca Houston</strong>\n          </div>\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Brianna White</strong>\n          </div>\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Bert Flint</strong>\n          </div>\n        </div>\n      </div>\n      <div class=\"relative\">\n        <div class=\"sticky top-0 px-4 py-3 flex items-center font-semibold text-sm text-gray-900 bg-gray-50/90 backdrop-blur-sm ring-1 ring-gray-900/10\">C</div>\n        <div class=\"divide-y\">\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Colton Alfred</strong>\n          </div>\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Cynthia Houston</strong>\n          </div>\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Cheyenne White</strong>\n          </div>\n          <div class=\"flex items-center gap-4 p-4\">\n            <img class=\"w-12 h-12 rounded-full\" src=\"https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=4&w=256&h=256&q=80\" />\n            <strong class=\"text-gray-900 text-sm font-medium\">Charlie Flint</strong>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n"}),(0,d.mdx)("pre",Object.assign({},{className:"language-html"}),(0,d.mdx)("code",Object.assign({parentName:"pre"},{className:"language-html"}),(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"sticky top-0")," ...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"A",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n        ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"img")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"src"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""))," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"/>")),"\n        ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"strong"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Andrew Alfred",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"strong"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n        ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"img")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"src"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""))," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"/>")),"\n        ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"strong"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Aisha Houston",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"strong"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"<!-- ... -->"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"class"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"sticky top-0"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\"")),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"B",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n        ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"img")," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-name"}),"src"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token attr-value"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""),"...",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"\""))," ",(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"/>")),"\n        ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"<"),"strong"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"Bob Alfred",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"strong"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n      ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"<!-- ... -->"),"\n    ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")),"\n  ",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token comment"}),"<!-- ... -->"),"\n",(0,d.mdx)("span",Object.assign({parentName:"code"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token tag"}),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,d.mdx)("span",Object.assign({parentName:"span"},{className:"token punctuation"}),">")))),(0,d.mdx)("hr",null),(0,d.mdx)(l,{level:2,id:"applying-conditionally",nextElement:{type:"heading",depth:3},ignore:!0,mdxType:"Heading"},"Applying conditionally"),(0,d.mdx)(l,{level:3,id:"hover-focus-and-other-states",nextElement:{type:"jsx"},ignore:!0,mdxType:"Heading"},"Hover, focus, and other states"),(0,d.mdx)(j.k,{defaultClass:"relative",featuredClass:"absolute",mdxType:"HoverFocusAndOtherStates"}),(0,d.mdx)(l,{level:3,id:"breakpoints-and-media-queries",nextElement:{type:"jsx"},ignore:!0,mdxType:"Heading"},"Breakpoints and media queries"),(0,d.mdx)(i.p,{defaultClass:"relative",featuredClass:"absolute",mdxType:"BreakpointsAndMediaQueries"}))}o.isMDXComponent=!0,o.layoutProps=m},74565:function(a,b,c){"use strict";c.d(b,{p:function(){return e}});var d=c(85893);function e(a){var b=a.defaultClass,c=a.featuredClass,e=a.element,f=a.children;return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)("p",{children:["You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use ",(0,d.jsxs)("code",{children:["md:",c]})," to apply the ",(0,d.jsx)("code",{children:c})," utility at only medium screen sizes and above."]}),f||(0,d.jsx)("pre",{className:"language-html",children:(0,d.jsx)("code",{className:"language-html",dangerouslySetInnerHTML:{__html:"<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>{element}</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>{defaultClass} <span class=\"code-highlight bg-code-highlight\">md:{featuredClass}</span><span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token comment\">&lt;!-- ... --></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>{element}</span><span class=\"token punctuation\">></span></span>\n".replace(/{element}/g,void 0===e?"div":e).replace("{defaultClass} ",b?"".concat(b," "):"").replace("{featuredClass}",c)}})}),(0,d.jsxs)("p",{children:["To learn more, check out the documentation on"," ",(0,d.jsx)("a",{href:"/docs/responsive-design",children:"Responsive Design"}),","," ",(0,d.jsx)("a",{href:"/docs/dark-mode",children:"Dark Mode"})," and"," ",(0,d.jsx)("a",{href:"/docs/hover-focus-and-other-states#media-queries",children:"other media query modifiers"}),"."]})]})}},83434:function(a,b,c){"use strict";c.d(b,{e:function(){return l}});var d=c(85893),e=c(86010),f=c(39043),g=c(67294);function h(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function i(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){h(a,b,c[b])})}return a}var j={none:"",md:"p-8"};function k(a){var b=a.as,c=a.style,f=a.padding,g=a.p,h=a.className,k=a.containerClassName,l=a.html,m=a.children,n=a.hint,o=null!=f?f:void 0===g?"md":g,p=j[o];if(void 0===p)throw Error("Invalid padding value: ".concat(JSON.stringify(o)));return(0,d.jsxs)("div",{className:k,children:[void 0!==n&&(0,d.jsxs)("div",{className:"not-prose mb-4 flex space-x-2",children:[(0,d.jsx)("svg",{className:"flex-none w-5 h-5 text-gray-400",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true",children:(0,d.jsx)("path",{d:"m9.813 9.25.346-5.138a1.276 1.276 0 0 0-2.54-.235L6.75 11.25 5.147 9.327a1.605 1.605 0 0 0-2.388-.085.018.018 0 0 0-.004.019l1.98 4.87a5 5 0 0 0 4.631 3.119h3.885a4 4 0 0 0 4-4v-1a3 3 0 0 0-3-3H9.813ZM3 5s.35-.47 1.25-.828m9.516-.422c2.078.593 3.484 1.5 3.484 1.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),(0,d.jsx)("p",{className:"text-gray-700 text-sm font-medium",children:n})]}),(0,d.jsxs)(void 0===b?"div":b,{style:i({backgroundPosition:"10px 10px"},c),className:"not-prose relative bg-grid-gray-100 bg-gray-50 rounded-xl overflow-hidden",children:[(0,d.jsx)("div",{className:"absolute inset-0 bg-gradient-to-b from-gray-50 opacity-60"}),(0,d.jsx)("div",i({className:(0,e.Z)("relative rounded-xl overflow-auto",p,h)},l?{dangerouslySetInnerHTML:{__html:l}}:{children:m})),(0,d.jsx)("div",{className:"absolute inset-0 pointer-events-none border border-black/5 rounded-xl"})]})]})}function l(a){return a.resizable?(0,d.jsx)(m,i({},a)):(0,d.jsx)(k,i({},a))}function m(a){var b=(0,g.useRef)(),c=(0,f.c$)(0),e=(0,g.useRef)(),h=(0,g.useRef)();return(0,g.useEffect)(function(){var a=new window.ResizeObserver(function(){c.set(0)});return a.observe(b.current),function(){a.disconnect()}},[]),(0,g.useEffect)(function(){h.current.onselectstart=function(){return!1}},[]),(0,d.jsxs)("div",{ref:b,className:"relative",children:[(0,d.jsx)(k,i({as:f.ww.div,style:{marginRight:(0,f.Hm)(c,function(a){return-a})}},a)),(0,d.jsx)("div",{ref:e,className:"absolute inset-y-0 right-[-1.375rem] left-80 ml-4 pointer-events-none",children:(0,d.jsx)(f.ww.div,{ref:h,drag:"x",_dragX:c,dragMomentum:!1,dragElastic:0,dragConstraints:e,className:"pointer-events-auto absolute top-1/2 right-0 -mt-6 p-2 hidden md:block cursor-ew-resize",style:{x:c},onDragStart:function(){document.documentElement.classList.add("dragging-ew")},onDragEnd:function(){document.documentElement.classList.remove("dragging-ew")},children:(0,d.jsx)("div",{className:"w-1.5 h-8 bg-gray-500/60 rounded-full"})})})]})}},68143:function(a,b,c){"use strict";c.d(b,{k:function(){return e}});var d=c(85893);function e(a){a.property,a.utility;var b=a.variant,c=void 0===b?"hover":b,e=a.defaultClass,f=a.featuredClass,g=a.element,h=a.children;return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)("p",{children:["Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use"," ",(0,d.jsxs)("code",{children:[c,":",f]})," ","to only apply the ",(0,d.jsx)("code",{children:f})," utility on ",c,"."]}),h||(0,d.jsx)("pre",{className:"language-html",children:(0,d.jsx)("code",{className:"language-html",dangerouslySetInnerHTML:{__html:"<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>{element}</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>{defaultClass} <span class=\"code-highlight bg-code-highlight\">{variant}:{featuredClass}</span><span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token comment\">&lt;!-- ... --></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>{element}</span><span class=\"token punctuation\">></span></span>\n".replace(/{element}/g,void 0===g?"div":g).replace("{defaultClass} ",e?"".concat(e," "):"").replace("{variant}",c).replace("{featuredClass}",f)}})}),(0,d.jsxs)("p",{children:["For a complete list of all available state modifiers, check out the"," ",(0,d.jsx)("a",{href:"/docs/hover-focus-and-other-states",children:"Hover, Focus, & Other States"})," documentation."]})]})}},53339:function(a,b,c){"use strict";c.r(b),c.d(b,{DocumentationLayout:function(){return l}});var d=c(85893),e=c(21744),f=c(9008),g=c(11163),h=c(21370),i=c(68224),j=c(54713);function k(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}function l(a){var b=(0,g.useRouter)();return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(i.D,{suffix:"/"===b.pathname?void 0:"Tailwind CSS",children:a.layoutProps.meta.metaTitle||a.layoutProps.meta.title}),(0,d.jsxs)(f.default,{children:[(0,d.jsx)("meta",{name:"twitter:card",content:"summary"},"twitter:card"),(0,d.jsx)("meta",{name:"twitter:image",content:"https://tailwindcss.com".concat(h.Z)},"twitter:image")]}),(0,d.jsx)(e.C,function(a){for(var b=1;b<arguments.length;b++){var c=null!=arguments[b]?arguments[b]:{},d=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(d=d.concat(Object.getOwnPropertySymbols(c).filter(function(a){return Object.getOwnPropertyDescriptor(c,a).enumerable}))),d.forEach(function(b){k(a,b,c[b])})}return a}({nav:j.u},a))]})}l.nav=j.u}},function(a){a.O(0,[9774,3430,6401,4756,6852,1350,4713,2888,179],function(){return a(a.s=22939)}),_N_E=a.O()}])