text: var SLDS=SLDS||{};SLDS["__internal/chunked/showcase/ui/utilities/position/example.jsx.js"]=function(e){function t(t){for(var o,n,a=t[0],r=t[1],d=t[2],c=0,p=[];c<a.length;c++)n=a[c],l[n]&&p.push(l[n][0]),l[n]=0;for(o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);for(u&&u(t);p.length;)p.shift()();return s.push.apply(s,d||[]),i()}function i(){for(var e,t=0;t<s.length;t++){for(var i=s[t],o=!0,a=1;a<i.length;a++){var r=i[a];0!==l[r]&&(o=!1)}o&&(s.splice(t--,1),e=n(n.s=i[0]))}return e}var o={},l={3:0,7:0,8:0,15:0,16:0,22:0,32:0,38:0,42:0,45:0,54:0,58:0,59:0,63:0,64:0,67:0,71:0,75:0,77:0,80:0,84:0,87:0,88:0,93:0,99:0,100:0,104:0,106:0,114:0,117:0,118:0,122:0,124:0,125:0,126:0,127:0,128:0,129:0,133:0,138:0,144:0,152:0,163:0,167:0,170:0,171:0,178:0,181:0,182:0},s=[];function n(t){if(o[t])return o[t].exports;var i=o[t]={i:t,l:!1,exports:{}};return e[t].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=o,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/assets/scripts/bundle/";var a=this.webpackJsonpSLDS___internal_chunked_showcase=this.webpackJsonpSLDS___internal_chunked_showcase||[],r=a.push.bind(a);a.push=t,a=a.slice();for(var d=0;d<a.length;d++)t(a[d]);var u=r;return s.push([74,0]),i()}({0:function(e,t){e.exports=React},74:function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.examples=void 0;var o=function(e){return e&&e.__esModule?e:{default:e}}(i(0));t.examples=[{id:"fixed",label:"Fixed",element:o.default.createElement("div",{className:"demo-only slds-grid",style:{height:"150px",width:"300px",padding:"2rem"}},o.default.createElement("div",{className:"slds-is-fixed"},o.default.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"An element with fixed positioning is positioned relative to the viewport. If no other positioning values are given (",o.default.createElement("code",null,"top, right, bottom, left"),") it will start its positioning relative to where it is in the flow of the page."),o.default.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-fixed` can be used to position a container relative to the viewport."},{id:"absolute",label:"Absolute",element:o.default.createElement("div",{className:"demo-only slds-grid",style:{height:"150px",width:"300px",padding:"2rem"}},o.default.createElement("div",{className:"slds-is-absolute"},o.default.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"An element with absolute positioning is positioned relative to its closest ancestor with relative positioning. If no other positioning values are given (",o.default.createElement("code",null,"top, right, bottom, left"),") it will start its positioning relative to where it is in the flow of the page."),o.default.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-absolute` can be used to position a container relative to its closest ancestor with relative positioning."},{id:"relative",label:"Relative",element:o.default.createElement("div",{className:"demo-only slds-grid",style:{height:"150px",width:"300px",padding:"2rem"}},o.default.createElement("div",{className:"slds-is-relative"},o.default.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"An absolutely positioned element is positioned relative to the nearest positioned parent. The ",o.default.createElement("code",null,".slds-is-relative")," class can be used to give the parent or ancestor positioning."),o.default.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-relative` can be used to contain children if children are absolutely positioned and out of flow. It is also used to position element without changing layout."},{id:"static",label:"Static",element:o.default.createElement("div",{className:"demo-only slds-grid",style:{height:"150px",width:"300px",padding:"2rem"}},o.default.createElement("div",{className:"slds-is-static"},o.default.createElement("div",{style:{position:"absolute",top:"1rem",left:"1rem",border:"1px solid red",background:"#f4f6f9"}},"A static positioned element is positioned exactly as it comes in the flow of the page."),o.default.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."))),description:"`.slds-is-static` resets positioning of element back to normal behavior."}]}});