Z-Index不适用于图库

时间:2015-08-20 15:33:35

标签: javascript css

http://gomocloud.com/ambassadorhi/homebuilder/2015/testing/testing.html

我要做的是在选择时显示屋顶颜色和壁板颜色。

我已经为每个部分分配了不同的z-index级别。但是,正如您所看到的,当我为房屋的侧板选择一种新颜色时,屋顶图像会恢复为默认颜色,即使我点击了具有更高z-index的元素。

我甚至尝试在CSS代码中从position:absolute切换到position:relative。任何帮助将不胜感激。

这是JSFiddle

1 个答案:

答案 0 :(得分:0)

您使用相同的输入控制屋顶和侧板。在这种情况下,这意味着当您单击屋顶时,侧板将转到默认侧板,反之亦然。

你也没有真正对Z-index做任何事情。所有屋顶的价值都是10,而所有的屋顶都有20个(这无关紧要,因为屋顶不会与围墙重叠)。

如果你想使用Z-index显示和隐藏,你应该让活动屋顶Z-index高于所有其他屋顶,并对侧板做同样的事情。

为此,你需要2个变量。一个用于控制哪个屋顶是活动的,另一个用于控制哪个屋顶是活动的。现在你只能一次控制其中一个,而另一个默认是DOM树中哪一个更高。