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

Question

我试图在Google Map上创建一个折痕叠加层，以使地图看起来像是一张桌子上的真实地图。折痕是位于地图上方的2条像素线。这看起来不错，不会破坏与地图的交互作用，500条垂直线条中只有6条不能点击并使用一个名为ext-forward的JavaScript库，在更好的浏览器上点击被转发，这是问题的教训。

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

标记是地图div的子元素，折痕与地图div相同。 IE的折痕和地图是兄弟姐妹。这张地图是z-index 0，标记是z-index < 100.无论我给折痕什么z-index，它们都会在地图div或以下绘制，绝不会介于两者之间。有什么方法可以改变它吗？

Answer 1

看起来你将不得不添加折痕作为地图div的孩子，z-index小于标记但大于地图本身。必要时使用JavaScript或jQuery将折痕对象附加到地图对象（我假定地图对象内容在某些点刷新）。

Answer 2

这里的the spec应该如何绘制。我认为规则9涵盖了两个绝对定位的项目，它们具有一个正的，非零的z-索引，但老实说，我不太清楚你的情况中所有对象如何定位以及它们在树中的位置准确地知道应该应用哪些规则。一些示例HTML可能会帮助人们解释您的特定情况的规则。

最简单的解决方案是将折痕放置在与标记相同的父级，并确保它们都是位置：绝对位置，以便通过z-index精确控制z级。如果它们不是位置：绝对的，那么它可能是控制事物的子命令。