使用 CSS 定位一个按钮和一个 div

Question

我有一个按钮和一个 div（其中包括一个 google 地图）。使用他们在 CSS 中的 ID，我为 div 写了 position:relative;，为按钮写了 position:absolute;，在 HTML 中我先调用了地图，然后调用了按钮。在这种情况下，按钮位于地图后面，所以我看不到它。另一方面，我尝试对按钮使用 position:relative;，对 div 使用 position:absolute;，并以相同的顺序调用按钮和 div。在这种情况下，我可以看到按钮但看不到 div。这是一些代码：

HTML

<body onload="initialize()" onunload="GUnload()">
<div id="map"></div>
<button id="button_map_1" onclick="send_data();">Store</button>

CSS

#button_map_1
{
    height:auto;
    width:auto;

    padding-top:10px;
    padding-bottom:10px;

    padding-left: 20px;
    padding-right: 20px;

    background-color:blue;

    font-family: Arial;
    font-size:15px;
    color:white;

    border:0px;
    border-radius: 25px 25px 25px 5px;

    position: relative;
}

#map
{
    height: 100%;
    position: absolute;
}

有什么想法吗？

Answer 1

有多种方法可以按您想要的方式定位这些元素。例如，如果您希望它们并排放置，您可以将地图更改为比父地图小，这样按钮就可以保持在右侧。两个元素都应该向左（或向右）浮动。方法如下：

 #button_map_1
    {
        height:auto;
        width:auto;

        padding-top:10px;
        padding-bottom:10px;

        padding-left: 20px;
        padding-right: 20px;

        background-color:blue;

        font-family: Arial;
        font-size:15px;
        color:white;

        border:0px;
        border-radius: 25px 25px 25px 5px;

        position: relative;
        float:left;
    }

    #map
    {
        height: 100%;
        width: 90%;
        position: relative;
        float:left;
    }

当然，您可以将它们一个放在另一个上面：

#button_map_1
        {
            height:auto;
            width:auto;

            padding-top:10px;
            padding-bottom:10px;

            padding-left: 20px;
            padding-right: 20px;

            background-color:blue;

            font-family: Arial;
            font-size:15px;
            color:white;

            border:0px;
            border-radius: 25px 25px 25px 5px;

            position: absolute;
            left:10px;
            top: 10px;
            z-index:10;//or more if that's the case
        }

        #map
        {
            height: 100%;
            position: relative;
            float:left;
        }

使用 CSS 定位一个按钮和一个 div

Positioning one button and one div using CSS

html

css

css-position