ボタンとdiv（グーグルマップを含む）があります。CSSでそれらのIDを使用しposition:relative;て、divと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;
}
何か案は？
これらの要素を希望どおりに配置するには、いくつかの方法があります。たとえば、それらを並べて表示する場合は、マップを親よりも小さく変更して、ボタンを右側に配置できるようにすることができます。両方の要素が左（または右）に浮く必要があります。方法は次のとおりです。
#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;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加