Components within a stack overlap based on the DOM order. By default this would result in the second element overlapping the first, the third element 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>
This can visually be reversed where each element is overlapped by the previous element in the DOM order by supplying the reverse attribute.
Note
Supplying the reverse attribute doesn't alter the DOM order, it only reverses the displayed order of the 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 you can simply wrap the element and move the flexbox styling one layer deeper.