LogoLogo
  • Introduction
  • Early Access
  • System Requirements
  • Elements FAQ
  • Purchasing FAQ
  • Licensing FAQ
    • License Types
  • Why Elements?
    • Static Website Benefits
    • Build a Digital Garden
  • Community Forum
  • Marketplace
  • Elements App
    • Getting Started
    • Keyboard Shortcuts
    • Design System
    • Editor
      • Apple Intelligence
      • Component Inspector
      • Dark Mode
      • Node Browser
      • Page Manager
      • Preview
      • Resources
      • Responsive Breakpoints
      • Workspaces
    • Components
      • Built-in Components
        • Accordion
        • Background
        • Blog
        • Button
        • Container
        • Divider
        • Dropdown
        • Flex
        • Filter
        • Filter Tags
        • Form
        • Gallery
        • Grid
        • Image
        • Menu
        • Modal
        • Modal Close
        • Reveal
        • Image Slider
        • SVG
        • Text
        • Top Pages
        • Typography
        • Video
      • Common Controls
        • Link
        • Layout
        • Sizing
        • Spacing
        • Transitions
        • Effects
        • Filters
        • Transforms
        • Borders
        • Advanced
      • Custom Components
    • Templates
      • Global Templates
    • Site Settings
      • Template
      • Publishing
    • Theme Studio
      • Theme
      • Colors
      • Screens
      • Font Family
      • Font Size
      • Spacing
      • Shadows
      • Border Width
      • Border Radius
      • Typography
    • How to
      • Add an Icon Inside a Button
      • Adjust Smooth Scroll Speed
      • Apply Anchor Scroll Padding
      • Add Snow to your Website
      • Build a Sticky Menu
      • Center Align Components
      • Create a Card
      • Site Banner with Text
      • Make a two column layout
    • Resources
    • Troubleshooting
    • SEO
    • Advanced
      • URL Scheme
  • Elements Language
    • Introduction
      • Getting Started
      • Component Styling
    • Element Pack
      • info.json
      • Components
        • info.json
        • Icons
        • Properties.json
          • Grouping Controls
          • Default Values
          • General Structure
            • Title
            • ID
            • Format
            • Visible
            • Enabled
            • Responsive
          • UI Controls
            • Divider
            • Heading
            • Image
            • Information
            • Link
            • Number
            • Resource
            • Segmented
            • Select
            • Slider
            • Switch
            • Text
            • Text Area
            • Theme Border Width
            • Theme Border Radius
            • Theme Color
            • Theme Font
            • Theme Spacing
            • Theme Shadow
            • Theme Text Style
            • Theme Typography
        • Templates
          • Portal
          • Backend
          • Conditional Statements
          • Regular Expressions
          • Looping
          • Includes
          • Image Resources
          • HTML
            • Anchor
            • Raw
            • Editable Content
            • Dropzones
            • Inline templates
          • CSS
          • JavaScript
        • Assets
        • Hooks.js
          • Common use cases
          • Passing data to templates
          • Working with Collections
          • Working with UI Controls
          • Working with Resources
          • Available Functions
            • rw.addAnchor
            • rw.getBreakpoints
            • rw.getBreakpointNames
            • rw.getResponsiveValues
            • rw.resizeResource
            • rw.setProps
            • rw.setRootElement
          • Available Data
            • rw.collections
            • rw.component
            • rw.node
            • rw.pages
            • rw.project
            • rw.props
      • Collections
        • Data collections in Hooks.js
        • Accessing Data in Templates
        • Collections in properties.json
      • Shared Files
        • Assets
        • Templates
      • Themes
    • Troubleshooting
  • Elements Cloud
    • Getting Started
    • Troubleshooting
  • Elements Store
    • Getting Started
    • Add-on Guidelines
  • Branding
    • Logotype
    • Logotype Animated
    • Icon
  • Legal
    • Subscription Terms of Service
    • Cloud Terms of Service
    • Frameworks
Powered by GitBook

We are Realmac Software. We make nice things.

On this page
  • General
  • Position
  • Z-Index
  • Type (Inset)
  • Advanced
  • Overflow
  • Isolation
  • Visibility
  • Layout UI in Elements

Was this helpful?

Edit on GitHub
Export as PDF
  1. Elements App
  2. Components
  3. Common Controls

Layout

Set advanced properties for Position, Z-index, Visibility, and more.

PreviousLinkNextSizing

Last updated 3 months ago

Was this helpful?

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 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 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)

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

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

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

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.

Invisible

When set to invisible, the element is not visible on the page and takes up space in the layout as usual.

Layout UI in Elements

The Inset property is used to control the positioning of an element relative to its nearest positioned ancestor. for more details.

Controls how an element handles content that is too large for the container. See for more details.

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 for more details.

Controls the visibility of an element on the page. See for more details. Please note: The Visibility control was updated Janury 2025, so the video is slightly out of date.

See Tailwind CSS Top / Right / Bottom / Left
Tailwind CSS Overflow
Tailwind CSS Isolation
Tailwind CSS Visibility
Tailwind CSS Position
Tailwind CSS Z-Index
Component Layout Controls (October 2024)