Openlayers自定义控件显示在我的地图之外

Question

我用以下代码制作了一个自定义控件：

//Custom control
function RotateLeft(opt_options) {
    let options = opt_options ? opt_options : {};

    let rotateLeftButton = document.createElement('button');
    rotateLeftButton.setAttribute('title', 'rotate left');
    rotateLeftButton.innerHTML = 'R';

    let handleRotateLeft = function () {
        view.animate({
            rotation: view.getRotation() + (-Math.PI / 2),
        });
    };

    rotateLeftButton.addEventListener('click', handleRotateLeft, {
        passive: true
    });
    rotateLeftButton.addEventListener('touchstart', handleRotateLeft, {
        passive: true
    });

    let element = document.createElement('div');
    element.className = 'ol-rotate-left ol-unselectable ol-control';
    element.appendChild(rotateLeftButton);

    ol.control.Control.call(this, {
        element: element,
        target: options.target,
    });

}
ol.inherits(RotateLeft, ol.control.Control);

我正在像这样初始化地图：

var map = new ol.Map({
    controls: ol.control.defaults().extend([
        new ol.control.OverviewMap(),
        new ol.control.FullScreen(),
        new RotateLeft()
    ]),
    target: 'mapid',
    layers: [mapbox],
    view: new ol.View({
        center: ol.proj.fromLonLat([30.00, 30.00]),
        zoom: 2
    })
});

，由于某种原因，我的自定义控件显示在地图div外部，如下所示：

有人知道我为做到这一点做了什么，以及如何将按钮放置在地图中合理的位置？

谢谢