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

你可以让它相对定位，然后改变左边：245px;财产到保证金左：245px;然后将top属性更改为margin-top并赋予其负值。例如margin-top：-25px;

在谷歌地图上叠加div而不使用绝对位置

1 个答案: