【问题标题】:Unable to position button on the top right over Google Map无法在谷歌地图右上角定位按钮
【发布时间】:2019-06-03 18:02:30
【问题描述】:

我正在努力在 Google 地图上放置一个按钮,但 我无法将按钮移到右上角(它目前位于左上角)。我尝试了很多方法,但不确定正确的解决方案。

这里是代码

<style>
.myButton {
    -moz-box-shadow: 0px 10px 14px -7px #4a398c;
    -webkit-box-shadow: 0px 10px 14px -7px #4a398c;
    box-shadow: 0px 10px 14px -7px #4a398c;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5e45ea), color-stop(1, #8667f7));
    background:-moz-linear-gradient(left, #5e45ea 5%, #8667f7 100%);
    background:-webkit-linear-gradient(left, #5e45ea 5%, #8667f7 100%);
    background:-o-linear-gradient(left, #5e45ea 5%, #8667f7 100%);
    background:-ms-linear-gradient(left, #5e45ea 5%, #8667f7 100%);
    background:linear-gradient(to left, #5e45ea 5%, #8667f7 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5e45ea', endColorstr='#8667f7',GradientType=0);
    background-color:#5e45ea;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:14px;
    font-weight:bold;
    padding:8px 7px;
    text-decoration:none;
    text-shadow:0px 1px 0px #8667f7;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #8667f7), color-stop(1, #5e45ea));
    background:-moz-linear-gradient(top, #8667f7 5%, #5e45ea 100%);
    background:-webkit-linear-gradient(top, #8667f7 5%, #5e45ea 100%);
    background:-o-linear-gradient(top, #8667f7 5%, #5e45ea 100%);
    background:-ms-linear-gradient(top, #8667f7 5%, #5e45ea 100%);
    background:linear-gradient(to bottom, #8667f7 5%, #5e45ea 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8667f7', endColorstr='#5e45ea',GradientType=0);
    background-color:#8667f7;
}
.myButton:active {
    position:relative;
    top:1px;
}

   #over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }
</style>

    <div id="over_map">
      <a href="logout.php" class="myButton">Logout</a>
   </div>

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

As you can see the button is in the top left.

【问题讨论】:

标签: html css google-maps-api-3


【解决方案1】:

不要在#over_map CSS 中使用left: 10px;,而是尝试使用right: 10px;

【讨论】:

    猜你喜欢
    • 2019-11-14
    • 1970-01-01
    • 2016-11-19
    • 1970-01-01
    • 1970-01-01
    • 2018-05-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多