Относительное позиционирование пользовательских элементов управления с помощью OpenLayers 3

Question

Карта, которую я создаю с помощью OpenLayers 3, имеет несколько кнопок, которые могут быть доступны или недоступны в зависимости от некоторых других вещей. Поэтому я хочу сохранить скрытые скрытые кнопки, а другие будут использовать их пространство. Доступные параметры могут меняться, поэтому иногда кнопка становится видимой.

Есть несколько руководств по созданию custom controls with OpenLayers 3. Проблема в том, что все образцы, которые я видел, используют абсолютное позиционирование для элементов управления. Нужно знать, сколько элементов управления будет видно, и жестко закодировать координаты в CSS. Или измените координаты с помощью Javascript. Т.е., по ссылке выше:

.rotate-north { 
    top: 65px; 
    left: .5em; 
} 

Я попытался просто заходящего элемент с позиции: относительная, но затем они появляются ниже карты, так как элементы управления добавляются на страницу после карты. Таким образом, можно использовать относительное позиционирование с отрицательными координатами, но тогда, если карта изменит размер, вам придется переписать координаты в Javascript.

.ol-control.left-top { 
    position: relative; 
    top: -400px; /*map height*/ 
} 

Есть ли способ элегантно внедрить ориентированные пользовательские элементы управления с OpenLayers 3, в идеале только с CSS?

Я предполагаю, что я пытаюсь получить подобную функциональность, как и в Google Maps API:

map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlDiv); 

Answer 1

Хотя it is not a good solution for my use case, так как it is not supported by Android 4.3 and earlier, можно использовать CSS известково как предложено @Jonatas:

HTML:

<div class="parent"> 
    <div class="map"></div> 
    <div class="control"><button>CONTROL</button></div> 
</div> 

CSS:

.map { 
    width: 100%; 
    height: calc(100vh - 2em); 
    background-color: green; 
} 

.control { 
    position: relative; 
    left: .5em; 
    top: calc(-100vh + 2em + .5em); 
} 

Это, вероятно, необходимо будет использовать единицы просмотра (also not supported by Android 4.3 and earlier), так как calc может вычислять только значения на основе родительского элемента.

jsfiddle: https://jsfiddle.net/adlerhn/zjt53nmf/