Z-index doesn't render children over other children elements with different parents.

[Watermelon914]

Describe the bug

When I set z-index to a value on a child element, it won't render over other child elements with a different parent. I've tried setting the z-index for every other element to a lower value but this still doesn't do anything, the child element still renders behind other child elements with a different parent. This is fixed whenever I set the z-index on the parent element to a value greater than the z-index of the other sibling elements to the parent element.

To Reproduce

1. Create divs that have child and parent elements

   <root>
   <div>
   <div style="position: absolute; background-color: red; z-index: 0; left: 0; top: 0; width: 60px; height: 80px;" />
   </div>
   <div>
   <div style="position: absolute; background-color: green; z-index: 1; left: 0; top: 0; width: 80px; height: 60px;" />
   </div>
   </root>

2. Notice how the green square renders under the red square despite having a z-index of 1.

Expected behavior

The element with a z-index should render over elements without a z-index or with a lower z-index (unless the z-index is negative, then it should render under elements without a z-index).

Media/Files

Additional context

No response

[bub-bl]

I have the same problem, the problem is not solved 1 year later :/ I think the problem is that children are above all children within the same div but not above asencestor