Component "Above" other Component (Overlaping)

Hi!
I’m using this library to add a open street map to my vaadin application.

Now i want that a button is placed above the map :slightly_smiling_face:
I don’t mean that the button is actually on the map, but is simply a component above the map component. is that possible? how can i do that :smile:

I hope someone know what i mean :smile:

here the street map addon:

https://github.com/xdev-software/vaadin-maps-leaflet-flow/tree/develop

Or is there a trick with CSS styles? When I try to move the button up with margin-buttom (-20px) it disappears behind the map. Is it also possible that the map is behind it? :smile: :joy:

Yes, you’ll need to do that with CSS.

Essentially, you’ll want to have a container like a Div that contains the map and your component. Make the container position: relative and then you can position the button with something like position: absolute; bottom: 20px; right: 20px to have it 20px from the bottom-right corner on top of the map.

Thanks for the reply!
I currently have this view. Is that what you meant? Because now the button is no longer there (I think behind the map?)

@PageTitle("Settings")
@Route(value = "settings", layout = MainLayout.class)
public class SettingsView extends VerticalLayout {

  public SettingsView() {
    this.setSizeFull();
    this.setAlignItems(Alignment.CENTER);

    Div mapContainer = new Div();
    mapContainer.setWidth(100, Unit.PERCENTAGE);
    mapContainer.setHeight(83, Unit.PERCENTAGE);
    mapContainer.getStyle().set("position", "relative");

    LComponentManagementRegistry reg = new LDefaultComponentManagementRegistry(mapContainer);

    MapContainer map = new MapContainer(reg);
    map.setWidth(100, Unit.PERCENTAGE);
    map.setHeight(100, Unit.PERCENTAGE);
    mapContainer.add(map);

    LMap lMap = map.getlMap();
    lMap.addLayer(LTileLayer.createDefaultForOpenStreetMapTileServer(reg));

    Button button = new Button("Create");
    button.getStyle().set("border-radius", "200px");
    button.setWidth(200, Unit.PIXELS);
    button.setHeight(50, Unit.PIXELS);
    button.addThemeVariants(ButtonVariant.LUMO_SUCCESS);
    button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
    button.getStyle().set("position", "absolute");
    button.getStyle().set("bottom", "20px");
    button.getStyle().set("right", "20px");
    mapContainer.add(button);

    add(mapContainer);
  }

}

Use the browser’s Developer console to check where the element is, it’s probably behind the map, because of a different z-index.

Yes, youre right. the button is behind the map

Oh yes it seems to work! Thanks a lot :smile: