javascript - 在 Cesium 查看器/ map 上覆盖一个工具栏

标签 javascript html css django cesiumjs

您好,我正在尝试在 Cesium 查看器/ map 上覆盖一个工具栏,但是每当我尝试像沙堡示例中那样执行 div class = toolbar 时,按钮或我添加的任何内容总是显示在 map 下方。我想要这样的东西:http://i.imgur.com/KKI2W5R.png

这是我目前所拥有的:

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>

最佳答案

修复是在 html 文件中显式添加样式标签以声明 toolbar-left

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

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

关于javascript - 在 Cesium 查看器/ map 上覆盖一个工具栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50532841/

相关文章:

javascript - HTML/CSS/JavaScript : Force child elements to never exceed parent size without modifying children

javascript - Jupyter笔记本: button onclick doesn't work within running notebook

javascript - 绘图应用程序 : turn pixels to grayscale or erase them

html - ionic : image not showing over background image

html - 有没有一种方法可以突出显示焦点输入的字段/div?

html - 覆盖内容并使其响应

javascript - 6to5 es6 类,new Date() 触发超过最大调用堆栈

javascript - Raphaël JS 动态绘制 Angular 线

javascript - 仅在响应式 View 中触发 jQuery 函数

html - SVG viewbox 总是相对于它的大小?