Layout
Set advanced properties for Position, Z-index, Visibility, and more.
The Layout controls help you manage the overall layout and positioning of elements within a webpage. These controls include controls for handling display properties, positioning, z-index, overflow, visibility, and more.
General
General layout settings for Position, Z-index, and Inset.
Position
The Position controls how an element is placed in the document and how it interacts with its surrounding elements. These utilities correspond to standard CSS positioning properties like static, relative, absolute, fixed, and sticky. See Tailwind CSS Position for more details.
| Position Properties | Description |
|---|---|
None | No position properties are set on the container. |
Static | The element is positioned according to the normal document flow. |
Relative | The element is positioned relative to its normal position in the document. You can adjust its position using top, right, bottom, or left properties. The space it originally occupied remains reserved. |
Absolute | The element is positioned relative to its nearest positioned ancestor (an ancestor that has relative, absolute, or fixed positioning). If no such ancestor exists, the element is positioned relative to the initial containing block (usually the viewport). It is removed from the normal document flow, meaning it does not affect the layout of other elements. |
Fixed | The element is positioned relative to the viewport, meaning it stays in the same position even when the page is scrolled. Like absolute, it is removed from the document flow and does not affect the positioning of other elements. |
Sticky | The element is positioned relative until a scroll point is reached, after which it becomes “fixed” and sticks to that position until the scrolling container is out of view. It’s a mix of relative and fixed positioning. You must specify at least one of the top, right, bottom, or left properties for it to stick (e.g. Type > Individual > Top = 5px) |
Z-Index
The z-index controls the stack order of elements on the page and is an important CSS property in web design. When multiple elements overlap, the z-index determines which element appears on top of the others. See Tailwind CSS Z-Index for more details.
| Z-Index Properties | Description |
|---|---|
None | No Z-Index properties are set on the container. |
Auto | Lets the browser automatically determine the Z-index of the container. |
Custom | Set the Z-index manual for the container,can be a positive or negatiev value (e.g. -50, or 50). |
Type (Inset)
The Inset property is used to control the positioning of an element relative to its nearest positioned ancestor. See Tailwind CSS Top / Right / Bottom / Left for more details.
| Z-Index Properties | Description |
|---|---|
None | No uniform or individual spacing properties are set on the container. |
Uniform | Uniform combines the top, right, bottom, and left offset properties into a single option, allowing you to quickly set all four sides at once. |
Individual | Individual set the top, right, bottom, and left offset properties. |
Advanced
Advanced layout settings for Overflow, Isolation, and Visibility.
Overflow
Controls how an element handles content that is too large for the container. See Tailwind CSS Overflow for more details.
| Overflow Properties | Description |
|---|---|
None | No overflow properties are set on the container. |
Visible | Content that overflows the container will still be visible outside of its bounds. |
Hidden | Content that exceeds the dimensions of the container is completely hidden (no scrollbars are displayed, and you can’t scroll to see the overflowed content). |
Scroll | A scrollbar is always shown, regardless of whether the content overflows the container or not. The user can scroll to view the overflowing content. |
Auto | Scrollbars will automatically appear only if the content overflows the container. |
Isolation
In complex layouts, different elements may interact with each other in ways that are not always predictable, especially when dealing with z-index. Using isolate helps create a new stacking context for an element, effectively “isolating” it from the outside world, preventing unexpected overlaps or stacking behavior. See Tailwind CSS Isolation for more details.
| Isolation Properties | Description |
|---|---|
None | No Isolation properties are set on the container. |
Visible | Forces an element to create a new stacking context. This isolates the element’s stacking order from the rest of the page, meaning its child elements won’t interfere with other elements on the page, even if they have z-index values. |
Auto | This is the default setting that lets the browser determine the stacking context without forcing isolation. |
Visibility
Controls the visibility of an element on the page. See Tailwind CSS Visibility for more details.
| Visibility Properties | Description |
|---|---|
Auto | This is the default setting that lets the browser determine the visibility of an element. |
Visible | When set to visible, the element is fully visible on the page and takes up space in the layout as usual. |
Hidden | The element is not visible on the page, and the space it occupied will be removed. |
Collapse | The element is not visible on the page, but it still takes up the same space in the layout as if it were visible. It’s just hidden from view. |
Layout UI in Elements
Last updated
