在另一个元素的子元素下面绘制元素

时间:2011-08-10 21:52:45

标签: javascript html css google-maps

我正在尝试在Google地图上创建折痕叠加,以使地图看起来像桌面上的真实地图。折痕是位于地图上方的2条像素线。这看起来不错,并且不会破坏与地图的交互太多,只有500条垂直线中的6条无法点击并使用名为ext-forward的javascript库在更好的浏览器上转发点击,这可以解决问题。

问题在于放置在地图上的标记是在折痕下方绘制的,但仍然具有3d样式阴影。

标记是地图div的子项,折痕与地图div处于同一级别。 IE折痕和地图是兄弟姐妹。该映射是z-index 0,并且标记是z-index< 100.无论z-index是什么,我给它们折痕,他们将在地图div或以下绘制,永远不会。有没有办法改变这个?

2 个答案:

答案 0 :(得分:0)

看起来您必须将折痕添加为地图div的子项,其中z-index小于标记但大于地图本身。在必要时使用JavaScript或jQuery将折痕对象附加到地图对象(我假设地图对象内容在某些点刷新)。

答案 1 :(得分:0)

这是关于如何绘制事物的the spec。我认为规则9涵盖了两个绝对定位的项目,这些项目具有正的非零z索引,但老实说,我并不能很好地了解您的情况中的所有对象如何定位以及它们在树中的位置确切地知道应该适用哪些规则。一些示例HTML可能会帮助人们解释您的特定情况的规则。

最简单的解决方案是将折痕放在与标记相同的父级中,并确保它们都是位置:绝对,以便使用z-index精确控制z顺序。如果它们不是位置:绝对的,则可能是控制事物的子命令。