Use this layout component to show blocks on top of other blocks.

Each child passed to stack-layout will receive an increasingly higher value of zIndex.

This means flex-layout.row#viewone will appear on the bottom, flex-layout.row#viewtwo will appear over it with zIndex of value 2, and flex-layout.row#viewthree will appear over them both with zIndex of value 3. Another thing to notice is that if you pass the blockClass prop to any children of the stack-layout, it will apply the blockClass to the element that wraps the child element.

1. Import the Stack Layout app to your theme's dependencies to the manifest.json:

2. Add the stack-layout block to the desired template. For example:

Prop name	Type	Description	Default value
blockClass	string	Allows to pass a custom name to be added to component CSS classes.	null
zIndexOffset	number	An offset to be passed to the zIndex of the children of the stack layout. If you pass 3, the first children will have zIndex of 3, and the next layer will have zIndex of 4, and so on.	0
arialabel	string	A value to customize the aria-label property	null

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
stackContainer
stackItem
stackItem--first