Question

我在Google地图实例上定位DIV时遇到问题。在这种情况下，DIV导致能够访问地图的问题，从顶部到底部开始。当它应该停在绿色方块的边界时，它会占据地图的整个宽度。

绿色方块结束后，您无法与Google地图进行互动，但最底层除外。

你可以在这里看到我的意思：

http://www.christielakekids.com/newsite/index.php（在页面中间向下滚动到地图）

<div class="map_block">

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

            <div class="map_block_in">
                <div class="container">

                    <div class="map_block_left">
                        <p>Check out what we're up to in the community!</p>

                        <ul>
                            <li>
                                <a href="#">
                                    <span><img src="/_images/new/blue_circle.png" width="32" height="32" alt=""></span>
                                    <small>OUR PROGRAMS</small>
                                    <em class="clear"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span><img src="/_images/new/red_circle.png" width="32" height="32" alt=""></span>
                                    <small>OUR SPONSORS</small>
                                    <em class="clear"></em>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span><img src="/_images/new/orange_circle.png" width="32" height="32" alt=""></span>
                                    <small>EVENTS</small>
                                    <em class="clear"></em>
                                </a>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </div>


                    <div class="clear"></div>
                </div>
            </div>
         </div>


.map_block_left                             { float:left; display:inline-block; width:381px; background:url(../../../_images/new/green_bg.png) repeat left top; margin:140px 0 0 0; padding:80px 0 65px 0;}
.map_block_left p                           { font-family: 'GothamBookRegular'; font-size:20px; color:#FFF; line-height:25px; padding:0 40px 15px 50px;}
.map_block_left ul                          { display:block; margin:0 0 0 50px;}
.map_block_left ul li                       { display:block; margin:0 0 14px 0;}
.map_block_left ul li a                     { display:inline-block;}
.map_block_left ul li a span                { float:left; display:inline-block;}
.map_block_left ul li a small               { float:left; display:inline-block;font-family: 'GothamMedium'; font-size:20px; color:#FFF; line-height:25px; padding:2px 0 0 10px;}

Answer 1

添加以下样式：

.map_block_in {pointer-events: none;}

您应该能够与

下的地图进行互动

I should point out this is only available for newer browsers though

或者对于更多跨浏览器的解决方案，您只需添加：

.map_block_in,
.map_block_in .container {height:0;}

Answer 2

是的我得到了你的问题你可以做一件事尝试用css中的googlemap代码的Z-index而不是divison

Div元素阻止访问标记

2 个答案: