css-position - 自定义控件与 OpenLayers 3 的相对定位

Question

我正在使用 OpenLayers 3 构建的 map 有一些按钮，这些按钮可能可用也可能不可用，具体取决于其他一些因素。所以我想隐藏不可用的按钮，其他人将使用他们的空间。可用选项可能会发生变化，因此有时按钮可能会变得(不)可见。

有一些创建custom controls with OpenLayers 3的教程.问题是我看到的所有示例都对控件使用绝对定位。需要知道有多少控件是可见的，并在 CSS 中硬编码坐标。或者使用 Javascript 更改坐标。即，从上面的链接:

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

我试过只用 position:relative 设置元素，但随后它们出现在 map 下方，因为控件是在 map 之后添加到页面的。因此，可以使用负坐标的相对定位，但如果 map 大小发生变化，则必须在 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 ，可以按照@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);
}

这可能必须使用视口(viewport)单位 ( also not supported by Android 4.3 and earlier )，因为 calc 只能根据父元素计算值。

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