React JavaScript:如何正确地将下拉菜单放置在Google之上

Question

我一直试图定位一个dropdown菜单的特定位置的谷歌地图，具体在右上(或左上角也可以)。下面是我现在是获得的信息：

​

下面是预期的结果：

​

​

编辑

在尝试margin-top: 100px;之后，combobx将向下移动，但是如果我键入margin-bottom: 500px;，下拉列表仍然位于中间(原点所在)。同样，如果我键入margin-left: 500px，下拉列表将在右边移动，但如果我键入margin-right: 500px，下拉列表将不会比原点移动得更远。似乎唯一允许的运动是向下和左，而不是向上和右边。下面是一个屏幕：

​

​

我使用的代码如下：

GoogleMap.js

import React from 'react';
import styled from 'styled-components';
import GoogleMapReact from 'google-map-react';
import { Card, CardImg, CardText, CardBody, CardTitle, /*CardSubtitle,*/ Button } from 'reactstrap';
import ShipTracker from '../components/ShipTracker';

const MapContainer = styled.div`
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 200px;
    grid-gap: 10px;
    height: 100vh;
    grid-template-areas: "google-map   sidebar" "ship-tracker sidebar";

    .google-map {
        background: #424242;
        grid-area: google-map;
        position: relative;
        height: 100%;
        width: 100%;
    }
    .map-sidebar {
        background: #9dc183;
        grid-area: sidebar;
    }
    .ship-tracker {
        grid-area: ship-tracker;
    }
`;

var expanded = false;
function showCheckboxes() {
// show checkboxes
}

const BoatMap = () => (
    <div className="google-map">
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'My_KEY' }}
            center={{
                lat: 42.4,
                lng: -71.1
            }}
            zoom={11}
        >
            {/* Insert components here */}
            <form>
                <div class="multiselect">
                    <div class="combo-companies" onClick={showCheckboxes}>
                        <select>
                            <option>Select an option</option>
                        </select>
                        <div class="overSelect" />
                    </div>
                    <div id="checkboxes">
                        <label for="one">
                            <input type="checkbox" id="CD" />Marker-1
                        </label>
                        <label for="two">
                            <input type="checkbox" id="DJ" />Marker-2
                        </label>
                        <label for="three">
                            <input type="checkbox" id="DT" />Marker-3
                        </label>
                    </div>
                </div>
            </form>
        </GoogleMapReact>
    </div>
);

GoogleMap.css

.combo-companies {
    position: absolute;
    height: 34px;
    width: 10%;
    font-size: 16px;
    border: 1px solid #111;
    border-radius: 3px;
    left: 15px;
    top: 15px;
    z-index: 2000;
}

.multiselect {
    width: 200px;
}

.selectBox {
    position: relative;
}

.selectBox select {
    width: 100%;
    font-weight: bold;
}

.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#checkboxes {
    display: none;
    border: 1px #dadada solid;
}

到目前为止我所做的：

1)我用CSS网格布局来确定谷歌地图应该在哪里。在此之后，并在文档中再次查看，我确定了网格的位置。所以这里和这里应该是好的。

2)我认为主要的问题可以通过在组件上使用relative和absolute参数来确定，因为我在这一个和这这样的帖子上读到了a。尽管很有用，我还是找不出这个问题。

3)我知道我很接近这个解决方案，因为如果只是渲染，并偶然发现了这个有用的职位，并认为这可能是我的解决方案，那么剩下的唯一的东西是什么，但它不是。

感谢你为解决这个问题指出了正确的方向。

Answer 1

在GoogleMap.css中试试这个

.multiselect{
width: 200px;
position: absolute; /*Also try relative if this doesn't work */
margin: 2vh 50vw auto auto;
}