具有重叠div的锚点

Question

我使用的是基于网格的布局，有两个主要部分。图表和时间表。

图表，包含渐变垂直条，HTML类似于：

<div id="graph" class="container_160">
    <div id="Jan-97" class="grid_1 major"><a href="#">&nbsp;</a></div>
    <div id="Feb-97" class="grid_1 minor"><a href="#">&nbsp;</a></div>
    <div id="Mar-97" class="grid_1 minor"><a href="#">&nbsp;</a></div>
    <div id="Apr-97" class="grid_1 minor"><a href="#">&nbsp;</a></div>
    <div id="May-97" class="grid_1 minor"><a href="#">&nbsp;</a></div>
    etc...
</div>

时间轴，包含水平条，HTML类似于：

<div id="timeline" class="container_160">
    <div id="bar1" class="grid_32 suffix_128"><a href="#">&nbsp;</a></div>
    <div id="bar2" class="prefix_32 grid_24 suffix_104"><a href="#">&nbsp;</a></div>
    <div id="bar3" class="prefix_58 grid_7 suffix_95"><a href="#">&nbsp;</a></div>
</div>

时间轴相对于Graph而言是重叠的。我的问题是，当这些div重叠时，时间轴中的锚点停止工作。我对CSS和Jquery解决方案都持开放态度。提前谢谢。

吨。

Answer 1

当元素重叠时，一个元素将始终被“停用”。您可以控制z轴以定义哪个元素位于顶部，从而保持“活动”。使用css：z-index。数字越大意味着更多。

样品：

#graph { z-index: 2; }
#timeline { z-index: 1; }