11

我在网络应用程序中的 Google 地球插件上放置 html div 时遇到问题，我们将不胜感激。

它适用于地图、地形和混合模式，但在“地球”模式下，Flash 会启动并自动将地图分层。

Z索引没有帮助。

大概我可以做类似的事情：

document.getElementById('flashDiv').setAttribute('wmode', 'opaque');

但考虑到谷歌的东西是即时编译的，这使得它变得更加困难。查看生成的代码在这里没有帮助。同样，由于它是动态编译的，像 SWFObject 这样的东西无法挽救这一天……

有没有人遇到过类似的事情？我花了一上午的时间搜索 Google Earth API 组，但无济于事。

更新：经过更多的拉扯，答案可能在于iframe shim。我可能也草率地得出该插件是基于 Flash 的结论。正在调查...

替代文字
（来源：googlepages.com）

4

5 回答 5

16

我在这里整理了一个演示，展示了如何使用IFRAME垫片：

http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html

于 2009-08-12T15:58:56.060 回答
5

没有直接支持在 Api 或 Dom 中覆盖“z-indexing”一个 div。插件加载一个可执行文件，简单来说，就是在浏览器窗口上打了一个洞。使用“iframe shim”技术是标准的解决方法，尽管透明度可能很棘手。

有一个开放的功能请求将此功能添加到 api - 评论部分有一些很好的信息和链接。

此外，这里有一个很棒的在线演示

于 2009-03-07T13:14:30.507 回答
3

如果它是一个插件，那么您不能可靠地将其他元素放在它的顶部。当涉及插件时，浏览器通常会放弃大部分“分层”元素的能力。

我想 Iframe 可能是一种解决方法，只要您检查它是否仍然适用于大多数浏览器。

于 2009-03-02T06:04:28.210 回答
3

在调查了谷歌让用户嵌入代码的方式之后，它看起来像是一个 iFrame。不过，如果您在使用闪光灯时遇到任何问题，请参见下文...

尝试在 Flash 元素上显示下拉导航（或在 YouTube 视频上显示 html）时遇到类似情况。有几个因素起作用。

第一个是我想要悬停在 flash 元素上的 html 元素，它必须是同级 html 元素，并为每个同级元素以及父 div 设置 css 属性。因此，例如：

<div id="parent">
  <div id="sibling"></div>
  <embed id=”flash”&gt;<other script code></embed>
</div>

那么我的CSS将是

//.parent may not need to be set to relative
#parent   { position: relative; }
// the value on sibling1 just needs to be higher than .sibling2
#sibling  { position: relative; z-index: 20; }
#flash    { position: relative; z-index: 10; display:inline }

另一件值得注意的事情是您的闪存需要将 wmode 参数设置为透明。

这个技巧适用于各种 Flash 应用程序以及 YouTube 视频 - 技巧是确保要在 Flash 上显示的 html 是实际 Flash 代码的兄弟元素，而不是父 div，z-index 为在 flash 上显示的 html 高于 flash 元素，两个 html 元素的定位都设置为相对或绝对，并且 wmode 参数设置为透明。

希望这会有所帮助——但我猜你的问题出在 iFrame 上。

于 2009-03-04T13:15:03.417 回答
0

将“iframe”z-index 设置为 100

并将显示在顶部 z-index 上的 div 设置为 200（div 必须至少是相对位置）

于 2014-07-21T21:21:46.560 回答