Notification Badges cannot be above a Button?

I want to have a notification showing the number of items in a cart.

I used a containing group with a button and a notification badge (using align parent). The button is part of a row so without z-index it throws it out of whack as seen below:

I found another issue when trying to remedy the above issue.

Seems like even when my badge is ABOVE the button in the element tree, it’s still hidden behind the button! It only shows on top when i select it in the editor.
I even tested this in preview and the badge is still under the button.

I assume buttons might take higher precedence in a group then?

CleanShot 2024-03-30 at 21.04.06@2x

That’s not right. Right click it and click one of the following:

For it to be on top, it would actually be below the element. Assuming load order = list order (descending), but not sure.

If that doesn’t work, just use a group on top of it, then use margin to bring it down.

1 Like

yup, I was a bit too use to photoshop there, and I placed it lower on the tree to actually be on top!
Wish there was a z-index though cause I’m still messing with margins and other weird tricks to get the button row aligned but luckily this site does not need to have a mobile version.