Question

我正在使用铯：http://cesiumjs.org/ 我想让一些div漂浮在铯地图上，但我无法让它发挥作用。

我在jsfiddle.net/j08691/dChUR/5/尝试了以下容器/标签方法 - 用cesium map div代替图像 - 但它似乎不起作用 - “tag”div未显示

任何帮助？

Answer 1

要添加到emackey的答案，除了向{c}添加position: absolute之外，我必须做的就是添加top:150px或bottom:150px 。基本上任何指定相对于父容器的位置的东西。

即使使用绝对位置，它很可能被铯小部件推下，因为它占用了100％的高度。

Answer 2

您需要在CSS中添加position: absolute;和top或bottom，因为小部件也使用绝对定位。添加此项会创建一个新的stacking context，它会覆盖z-index。

这是一个工作示例，点击＆＃34;运行代码片段＆＃34;在这个底部：

＆＃13;

Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;

var viewer = new Cesium.Viewer('cesiumContainer', {
  timeline: false,
  animation: false,
  navigationHelpButton: false
});

var skyAtmosphere = viewer.scene.skyAtmosphere;
var skyCheckbox = document.getElementById('skyCheckbox');

skyCheckbox.addEventListener('change', function() {
  viewer.scene.skyAtmosphere = skyCheckbox.checked ? skyAtmosphere : undefined;
}, false);

＆＃13;

html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif; color: #edffff;
}
#controlPanel {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(42, 42, 42, 0.8);
  padding: 5px 8px;
  border-radius: 5px;
}
label {
  cursor: pointer;
}
label:hover span {
  text-decoration: underline;
}

＆＃13;

<link href="http://cesiumjs.org/releases/1.15/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.15/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>
<div id="controlPanel">
  This is a floating control panel<br/>
  with a translucent background color.
  <p>
    <label>
      <input id="skyCheckbox" type="checkbox" checked />
      <span>Enable atmospheric effect</span>
    </label><br/>
    <button class="cesium-button">Button 1</button>
    <button class="cesium-button">Button 2</button>
  </p>
</div>

＆＃13;

HTML5 / Cesium - 使div在cesium map上浮动

2 个答案: