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

Question

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

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

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

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

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

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

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

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

Answer 1

Хотя это не очень хорошее решение для моего случая использования, так как оно не поддерживается Android 4.3 и более ранними версиями, можно использовать CSS calc, как предложено @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);
}

Для этого, вероятно, придется использовать единицы просмотра ( также не поддерживаемые в Android 4.3 и более ранних версиях), так как calc может вычислять значения только на основе родительского элемента.

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