使用OpenLayers 3的自定义控件的相对定位3

Question

我正在使用OpenLayers 3构建的地图有一些按钮，根据其他内容，该按钮可能会或可能不会可用。因此，我想隐藏不可用的按钮，其他按钮将使用其空间。可用的选项可能会更改，因此有时可能会（在）可见。

有一些用于使用OpenLayers创建自定义控件的教程。问题在于，我所看到的所有样本都使用绝对定位对控件。一个人需要知道将看到多少个控件，并在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

虽然这不是我用例的好解决方案，因为Android 4.3及以前不支持它，但可以使用@Jonatas建议的CSS CALC：

。

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和更早的支持），因为CARC只能根据父元素计算值。

jsfiddle：https：//jsfiddle.net/adlerhn/zjt53nmf/