Question

我有一个按钮和一个div（包括一个谷歌地图）。在CSS中使用它们的ID我为div编写position:relative;，为按钮编写position:absolute;，在HTML中我先调用地图然后按钮。在这种情况下按钮留在地图后面，所以我看不到它。另一方面，我尝试使用position:relative;作为按钮，position:absolute;作为div，我调用按钮和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

1 个答案: