Javascript 将工具栏覆盖在铯查看器/地图上_Javascript_Html_Css_Django_Cesium

Javascript 将工具栏覆盖在铯查看器/地图上

javascript html css django

Javascript 将工具栏覆盖在铯查看器/地图上,javascript,html,css,django,cesium,Javascript,Html,Css,Django,Cesium,您好，我正在尝试在Cesium Viewer/Map上覆盖一个工具栏，但每当我尝试像sandcastle示例中那样使用div class=toolbar时，按钮或我添加的任何东西都会显示在地图下方。我想要这样的东西：以下是我目前掌握的情况： Index.html <html> <head> <title>Demo</title> </head> <body> {% load staticfiles%}

您好，我正在尝试在Cesium Viewer/Map上覆盖一个工具栏，但每当我尝试像sandcastle示例中那样使用div class=toolbar时，按钮或我添加的任何东西都会显示在地图下方。我想要这样的东西：

以下是我目前掌握的情况：

Index.html

<html>
<head>
    <title>Demo</title>

</head>

<body>
     {% load staticfiles%}
     <script src= {% static "js/Cesium.js"  %} type="text/javascript"></script>
     <div id="cesiumContainer"></div>
     <div class="toolbar-left">
    <button onclick="alert('You clicked!');">Click me!</button>
    </div>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'test/hello.css' %}" />
     <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
     </script>
</body> 
</html>


演示
{%load staticfiles%}
点击我！
{%load static%}
var查看器=新的铯查看器（“铯容器”）；

修复方法是在html文件中显式添加一个样式标记，以声明工具栏处于左侧

#cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .toolbar-left {
            display: block;
            position: absolute;
            top: 5px;
            left: 5px;
        }

修复方法是显式地在html文件中添加一个样式标记，以声明工具栏左侧

#cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .toolbar-left {
            display: block;
            position: absolute;
            top: 5px;
            left: 5px;
        }