css - 在不使用绝对位置的情况下在谷歌地图上覆盖 div

Question

我正在使用谷歌地图 API，我想覆盖一个 div，所以我已经这样做了。

HTML

<div class="map-container">

<div class="radius-container">
    <h3>Raduis</h3>
    <select name="radius" class="js-radius">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="10">10</option>
    </select>
    <h3>mile(s)</h3>
</div>

<div id="map" class="map"></div>
</div>

CSS

.radius-container {

    text-align: right;
    position: absolute;
    top: 95px;
    left: 245px;
    z-index: 99;
    background-color: $orange;
    color: white;
    padding: 5px;

    select {
        width: 60px;
        font-size: 20px;
        text-align: center;
        margin: 5px 0;
    }
}

    .map-container {
    position: relative;
}

这确实按照我想要的方式定位了 div，但我在页面上有向下滑动的元素，因此当元素向下滑动时，绝对 div 停留在它弄乱设计的位置。

有谁知道我如何在不使用绝对位置的情况下定位它？

谢谢

Answer 1

你可以让它相对定位，然后改变 left: 245px;左边距属性:245px；然后将 top 属性更改为 margin-top 并给它一个负值。例如 margin-top: -25px;