Components within a stack overlap based on the DOM order. By default, the second element overlaps the first, the third overlaps the second, and so on.
First child in DOM
Second child in DOM
Third child in DOM
<x-stack><x-alertstyle="success">First child in DOM</x-alert><x-alertstyle="info">Second child in DOM</x-alert><x-alertstyle="danger">Third child in DOM</x-alert></x-stack>
To visually reverse this, where each element is overlapped by the previous one, add the reverse attribute.
Note
The reverse attribute doesn't alter the DOM order; it only reverses the displayed order of child elements.
First child in DOM
Second child in DOM
Third child in DOM
<x-stackreverse><x-alertstyle="success">First child in DOM</x-alert><x-alertstyle="info">Second child in DOM</x-alert><x-alertstyle="danger">Third child in DOM</x-alert></x-stack>
The x-stack component is intended to be used with the x-card and x-alert components, but it's not limited to just those components.
When elements are added to the x-stack component, overlap is automatically accounted for by adding a spacer element using the ::before and ::afterpseudo elements. Depending on the element, this might conflict with existing flexbox styling. To resolve this, wrap the element and move the flexbox styling one layer deeper.