CODEWITHSUNDEEP
androidioslayoutnativescript
Luca
Luca

Reputation: 299

How to "Overlap" two Layouts Nativescript

I need this Layout using Nativescript but I don't know how to do it. The RED box has to be in front of the BLACK box with custom position.

enter image description here

Many thanks!

Upvotes: 0

Views: 586

Answers (1)

William Juan
William Juan

Reputation: 1415

You could use an AbsoluteLayout as the container that contains the red and black box. The Label below are just placeholders for the black and red box. With AbsoluteLayout, you can then use the left and top properties similar to how you would do in css for position: absolute. Something to be aware of is the order of element in your html is the order of it stacking (in terms of z-index) - the further down it is in your html, the higher the z-index.

<AbsoluteLayout width="210" height="210">

    <!-- black box -->
    <Label text="no margin" left="10" top="10" width="100" height="100"/>

    <!-- red box -->
    <Label text="margin='30'" left="10" top="10" margin="30" width="100" height="90"/>

  </AbsoluteLayout>

Sidenote: you could also use a GridLayout to layer elements (if you don't need the absolute positioning properties such as left or top)

Upvotes: 1

Related Questions