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

Javascript 在另一个元素的子元素下绘制元素,javascript,html,css,google-maps,Javascript,Html,Css,Google Maps,我试图在谷歌地图上创建一个折痕覆盖,使地图看起来像桌子上的真实地图。折痕是位于地图上方的两条像素线。这看起来不错,不会破坏与地图的交互,500条垂直线中只有6条无法点击,在更好的浏览器上使用名为ext forward的javascript库,点击会被转发,这就是问题所在 问题在于,放置在地图上的标记绘制在折痕下方,但仍具有三维样式的阴影 标记是map div的子级,折痕与map div位于同一级别。即折痕和贴图是同级的。地图为z指数0,标记为z指数

我试图在谷歌地图上创建一个折痕覆盖,使地图看起来像桌子上的真实地图。折痕是位于地图上方的两条像素线。这看起来不错,不会破坏与地图的交互,500条垂直线中只有6条无法点击,在更好的浏览器上使用名为ext forward的javascript库,点击会被转发,这就是问题所在

问题在于,放置在地图上的标记绘制在折痕下方,但仍具有三维样式的阴影


标记是map div的子级,折痕与map div位于同一级别。即折痕和贴图是同级的。地图为z指数0,标记为z指数<100。无论我给折痕的z指数是多少,它们都会在地图div上方或下方绘制,而不会在两者之间绘制。有什么方法可以改变这一点吗?

看起来您必须添加折痕作为map div的子对象,z索引小于markers,但大于map本身。必要时,使用JavaScript或jQuery将折痕对象附加到map对象(我假设map对象内容在某些点刷新)。

下面介绍如何绘制对象。我认为规则9涵盖了两个绝对定位的项,它们的z索引为正,非零,但老实说,我没有很好地可视化您的情况下所有对象的位置以及它们在树中的位置,以确切地知道应该应用哪些规则。一些示例HTML可能会帮助人们解释针对您特定情况的规则


最简单的解决方案是将折痕与标记放在同一父对象中,并确保它们都处于绝对位置,以便使用z索引精确控制z顺序。如果它们不是position:absolute,那么可能是child order控制了一切。

考虑过这个选项,但是定位几乎是不可能的,因为这是谷歌地图允许平移的方式。