Create Overlapping Elements in Flex

Flex sections generate a layout and automatically align items, allowing you to make attractive sections fast and simply. However, if you have a more sophisticated design with overlapping components or a freestyle composition, an advanced grid is required. Advanced grids enable you to insert pieces in a freestyle composition without the need for automated layout. As a result, we suggest that you test your design at all breakpoints.

This article only applies to Flex users who began using it after July 18, 2022. If you are using Flex version 1.0, see Containers and Flexboxes (1.0).

To make overlapping elements:

1. Click to select a flex column.
2. Click the plus symbol in the floating menu or flex column.
3. Select Advanced grid from the flex elements section (previously named containers).
4. Note: To guarantee best practises, drag the advanced grid's boundaries to cover the whole flex column width.
5. Select a premade grid from Rearrange layout in the Layout section of the design panel. If you wish to make your own grid, utilise the Columns and Rows drop down choices in the Customize layout window to add columns and rows.
6. Click the add symbol in the floating menu, then choose the required widgets and arrange them in the advanced grid.
7. Select an element by clicking it and then selecting Bring to front, Bring forwards, Send backwards, or Send to back in the Arrange area of the design panel.

When utilising advanced grids, we suggest that you double-check your design at each breakpoint. You may need to alter the design at particular breakpoints if you have overlapping components.