@multishiv19, I have to say I disagree. You show how you can cause one element to appear above another. You do not cover the case where that element is being placed above the boundary of and overlapping the top of another. The element above both of them tends to hide the “blue square.”
After a lot of fussing with z-indexes (which do not at all work as on a browser) and top and left properties, I thought of a much easier way to accomplish this kind of effect.
Make an AbsoluteLayout to hold everything. In it, place first the bottom-layer element (red shapes) and then the top-layer element (blue square). Give the lower layer (red shapes) a margin-top of 30 or something. That’s it.
(Excuse the abstract element names–I’m just trying to get the point across. In my case, they were StackLayouts.)
First, NativeScript will render the red squares, since they come first in the HTML. Then it will render the blue square on top, since it comes next in the HTML. Because they’re in an AbsoluteLayout, both are rendered at exactly the same y-coordinate, but the margin-top of the red squares will push them down.