How to positionate overlay

How to place popup correctly ? I have a map where every areas (features) are visible on the screen, and I don’t want anyone to move it. So I want the popup to be shown on the map but the popup doesn’t place itself automatically. When I click on some area on the edge of the screen the map gets dragged to the selected area

When I move the map, the size change

Whenever I click on some feature, on the bottom of the screen, the map is dragging me slowly to the selected area because of the “pointOnSurface” method How can the popup be shown only on visible screen ?

<div class="ol-overlay-container ol-selectable" style="position: absolute; top: 179px; left: 0;">

Top and left values are dynamically changed every one second

[ghettovoice]

Ok, I got it. In the demo there is additional css styles applied to the overlay container that prevents positioning from property. And also there is a bug in the vl-overlay styles, it always have position: abosulte.

According to the demo code, try to comment out this styles https://github.com/ghettovoice/vuelayers-demo/blob/master/src/App.vue#L761
And add this rules to workaround style bug:

.vl-overlay
    position: relative !important

[felixdenoix]

Allright everything is working fine now ! Thanks a lot for the plugin 😃