Having issue in handling relative item on my side

[rajesh-h]

@craigharman Thank you very much for this Modal.

I am trying this on my side.

You might be able to help me here.

This is my code: https://codesandbox.io/s/github/rajesh-h/mochachos

once loaded slightly scroll down may be till product 4 or 5 then click on + button, you will see Modal coming up.

You can observe the title and + and - negative symbols also will be visible on the popup.

I guess this is happening because I have elements, title, description and + and - symbol as relative position in my Product component. This is my guess. I don't know where else can the issue be arising.

https://codesandbox.io/s/github/rajesh-h/mochachos?file=/components/blocks/Product.vue:159-210

I had to make this relative as I wanted + and - symbol to be at the bottom of div and right side floated.

Now this element is creating problem for me in Modal.

I do not know how can I rectify this either by changing something on Modal or in my Product component.

Component Hierarchy Index -> ProductList -> Product

if you can just look at it and give some guidance that will be helpful.

I spent more than 7 hours on this, still no luck

[craigharman]

Looks like a z-index order to me. Try adding a z-0 class to the offending items (+/-).

[rajesh-h]

Thank you very much, I added z-10 to Modal Wrapper and it is working fine.