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

Each children 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 you pass the blockClass prop to any children of the stack-layout it will apply the blockClass to the element that wraps child element.

1. Import the breadcrumb's app to your theme's dependencies in the manifest.json, for example:

2. Add the stack-layout block to your 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

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