Studio Editor: Stacking Elements
4 min read
A stack is a flexbox container that "hugs" a group of elements – whether they are in a vertical or horizontal order. It ensures the elements stay in order, with the spacing you define, and never overlap.
Having said that, you can use negative margins to make elements overlap intentionally.
Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses.
In this article, learn how to:
Applying a stack
- Click an element that you want to be in the stack.
- Hold down the Shift key and select the other stack elements.
- Click Stack.
- (Optional) Drag the line between the elements to set margins.
Tip:
You can also create negative margins to make elements overlap intentionally.
Changing the stack direction
When you stack elements, the direction is automatically determined by the order of the elements. If the elements are arranged vertically, for example, the stack will be vertical.
Either way, you can always switch the direction using the drop-down. This automatically rearranges the elements so they're in the right order.
Managing a stack
You can customize the stack to match new content and requirements. Add more elements to the stack, move them around in a click of a button, and detach elements that are no longer needed.
To manage a stack:
- Select the relevant stack.
- Choose what to do next:
Add an element to the stack
Detach an element from the stack
. Then, click Detach from Stack.
Reorder elements in the stack
and Move Down 
icons.
Unstack elements
Designing a stack
The stack does not have to be transparent – you can design it to make the content stand out on the page. Add a background color, border and shadow. You can also make the stack corners more round or square.
To design a stack:
- Select the relevant stack.
- Click the Open Inspector arrow
at the top right of the Editor. - Scroll down to Design.
- Design the stack using the available options:
- Set the background color and its opacity.
- Add a border to frame the stack.
- Choose a radius for the corners.
- Enable shadow and manage settings like its angle, distance, size, etc.
