Div坐在另一个div上

Question

如何让.mapoverlay成为#mapcanvas的{​​{1}}。我猜这可以通过改变CSS的定位来实现，但是已经尝试过并且无法使其工作。任何帮助将不胜感激。

HTML：

<div id="map-canvas">
</div>
<div class="map-overlay">
    <div class="map-headline">
        <h3 class="blogheadline">Want to get in touch, we'd love to hear from you.   </h3>
    </div>
    <div class="map-address">
        <div class="map-address-icon"></div>
        <div class="map-address-name">Dan Morris</div>
        <div class="map-address-line-one">Gloucester Road, Horfield</div>
        <div class="map-address-line-two">Bristol, BS7 8PD</div>
    </div>
    <div class="map-contact-details">
        <div class="contact-icon-phone"></div>
    </div>
    <div class="map-contact-details"><div class="contact-icon-mail"></div>
    dan@danmorris.co.uk</div>
    <div class="directions-button">
        <a href="#contact" class="smoothScroll"  id="map-direction">GET DIRECTIONS</a>
    </div>
</div>
<div class="contact-map">
</div>

CSS：

.contact-map {
    height: 560px;
    width: 100%;
    float: left;
    margin-top: 40px;
}

.map-overlay {
    height: 375px;
    width: 550px;
    margin-top: 100px;
    margin-left: 100px;
    background-color: #FFF;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

html, body, #map-canvas {
    width: 100%;
    height:500px;
    margin: 0px;
    padding: 0px;
}

上面编码的截图。可以看到div正坐在地图后面。

Answer 1

尝试使用z-index: 10;，其中.map-overlay的数字高于#map-canvas，这样可确保.map-overlay始终位于#map-canvas之上。
将.map-overlay元素放在#map-canvas上方。 MDN和W3Schools供参考。

Answer 2

我尝试添加下一个样式并且有效

.map-overlay {
   position: absolute;
   top: 0;
   left: 0;
}

您能否提供有关定位的更多信息 - 它应该是什么样子

Answer 3

我猜你的意思是你希望地图叠加层位于地图画布的顶部。

所以最好的办法是：

＆＃13;

＆＃13;

.contact-map {
height: 560px;
width: 100%;
float: left;
margin-top: 40px;

}

.map-overlay {
height: 375px;
width: 550px;
margin-top: 100px;
margin-left: 100px;
background-color: #FFF;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
z-index:9999;

}

 html, body, #map-canvas {
    width: 100%;
    height:500px;
    margin: 0px;
    padding: 0px;
   position: absolute;
   background: blue;
  }

＆＃13;

<div id="map-canvas">
  <div class="map-overlay">
  <div class="map-headline">
    <h3 class="blogheadline">Want to get in touch, we'd love to hear from you.   </h3>
  </div>
  <div class="map-address">
    <div class="map-address-icon"></div>
    <div class="map-address-name">Dan Morris</div>
    <div class="map-address-line-one">Gloucester Road, Horfield</div>
    <div class="map-address-line-two">Bristol, BS7 8PD</div>
    </div>
   </div>
   <div class="map-contact-details">
     <div class="contact-icon-phone"></div>
    </div>
   <div class="map-contact-details"><div class="contact-icon-mail"></div>
    dan@danmorris.co.uk</div>
<div class="directions-button"><a href="#contact" class="smoothScroll"  id="map-direction">GET DIRECTIONS</a></div>
</div>
</div>
<div class="contact-map">
</div>

＆＃13;

＆＃13;

＆＃13;

请注意我的蓝色地图画布是如何包含其他内容的，就像覆盖图一样，用户可以看到您正在显示的地图，并在其上方显示您的联系信息......