Create Overlapping Elements in Flex

Flex sections create a layout and automatically align objects, which helps you easily and quickly design beautiful sections. However, when you have a more complex design with overlapping objects or freestyle composition, you need to use an advanced grid. Advanced grids allow you to place elements in a freestyle composition without automatic layout. Due to this, we recommend you check your design on all breakpoints.

Note

This article is only relevant for users who started using Flex after July 18, 2022. If you are on Flex version 1.0, see Containers and Flexboxes (1.0).

To create overlapping elements:

1. Click to select a flex column.
2. In the floating menu or in the flex column, click the plus icon ().
3. In the flex elements section, select Advanced grid (previously named containers).
4. Note
5. To ensure you follow best practices, drag the edges of the advanced grid so that it spans the entire flex column width.
6. In the Layout section of the design panel, select a premade grid from Rearrange layout. Or if you want to create your own grid, use the Columns and Rows drop down menus from Customize layout to add columns and or rows.
7. In the floating menu, click the plus icon, then select the desired widgets and arrange them in the advanced grid.
8. Click to select an element and in the Arrange section of the design panel, select Bring to front, Bring forward, Send backward, or Send to back.

Note

We recommend checking your design at each breakpoint when using advanced grids. With overlapping elements you might need to adjust the design on certain breakpoints.