Полноэкранный контроль положения на карте открытых слоев

Question

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

<div id="map"></div>
<script src="map.js"></script>

Это связано с файлом javascript со следующим кодом (я оставил код для удобства чтения):

var map = new ol.Map ({
  target: document.getElementById('map'),
  layers: ...,
  view: ...,
  controls: ...,
    new ol.control.FullScreen(),
    })
 ])
});

И, наконец, у меня есть файл CSS, который стилизует div, а также должен переместить полноэкранные элементы управления внизу справа:

#map {
  position: fixed;
  height: 100%;
  width: 100%;
}
.ol-full-screen {
  position: absolute;
  right: 10px;
  bottom 0px;
}

В фрагменте кода CSS я использую position: fixed длякарта и я пытаемся расположить полноэкранные элементы управления, назначая им абсолютную позицию, но это не работает.Органы управления не реагируют на положение bottom, но реагируют на позиционирование left, right и top.Я также попытался установить карту на относительную и элементы управления на абсолютную (это должно работать таким образом для div внутри div), но это также не принесло ожидаемого результата.Вместо этого карта больше не заполняет полное окно браузера, а элементы управления по-прежнему не перемещаются вниз.

Answer 1

По умолчанию в ol.css установлено значение

.ol-full-screen {
  right: .5em;
  top: .5em;
}

высота всех кнопок управления составляет 1,375em

Таким образом, верхняя закрепленная кнопка в правом нижнем углу будет

.ol-full-screen {
  right: .5em;
  top: calc(100% - 2.375em);
}