Positions

Use these shorthand utilities for quickly configuring the position of an element.

z-index

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">zIndex</span><span class="token operator">:</span> <span class="token string">'tooltip'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Box</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">zIndex</span><span class="token operator">:</span> <span class="token string">'modal'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>

API

<span class="token keyword">import</span> <span class="token punctuation">{</span> positions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/system'</span><span class="token punctuation">;</span>

Import name	Prop	CSS property	Theme key
`position`	`position`	`position`	none
`zIndex`	`zIndex`	`z-index`	`zIndex`
`top`	`top`	`top`	none
`right`	`right`	`right`	none
`bottom`	`bottom`	`bottom`	none
`left`	`left`	`left`	none