Question

我有三个元素：两个表和一个div，它是gMaps的画布。当这一行

<div id="map-canvas"/>

存在，gMaps正确显示，但我的其他元素不可见。在检查FireFox中的元素时，它们也不会出现。当行不存在时，gMaps会消失，我的其他元素也会正确显示。原因是什么？我的整个代码都附加了，因为它相对较短。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css"> /*gMaps style*/
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0;}
        #map-canvas { height: 50%; position: fixed; top: 50%;}
    </style>

    <script src="http://code.jquery.com/jquery-2.0.3.js" type="text/javascript">//jQuery for color picker</script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">//gMap API</script>    
    <script type="text/javascript" src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.min.js">//tablesorter</script>
</script>




    <script type="text/javascript">     //gMap API
        function initialize() {

            var center = new google.maps.LatLng(0,0);

        var mapOptions = {
            center: center,
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.SATELLITE
        };

        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>






<script>//colorpicker
    $(document).ready(function(){


        $('#palette td').click(function(){
            color = $(this).css('background-color');    
            $('body').css('background-color' , color);
        });

    });

</script>

<script>//tablesorter

    $(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
    ); 

</script>


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

    <table id="palette">
        <tr>
            //table elements
        </tr>
    </table>


        <table id="myTable" class="tablesorter"> 
            <thead> 
                <tr> 
                //table head
                </tr> 
            </thead> 
            <tbody> 
            //table body
            </tbody> 
        </table> 

    </body>
    </html>

Answer 1

Div的不应该自我关闭......

尝试将<div id="map-canvas"/>替换为<div id="map-canvas"></div>

答案 1 :(得分：0)

似乎地图覆盖了其他元素（如果您使用开发控制台，可以看到它们），如上面的评论所述。

将div相应地放置在地图下方，完全移除固定位置或添加z索引（如果重叠是您的意图）。

答案 2 :(得分：0)

来自MDN docs关于CSS top属性：

顶部CSS属性指定定位元素的位置的一部分。它对非定位元素没有影响。

对于绝对定位的元素（位置：绝对或位置：固定的元素），它指定元素的上边距边缘与其包含块的上边缘之间的距离。

使用top: 50%;，您将整个地点用于地图。即使10％也不够好。如果你不需要一些特殊的安排，你可以把它排除在外。

<div>元素必须正确关闭：

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

Answer 2