Anchors with overlapping divs

Question

I am using a grid based layout, with two main sections. Graph and Timeline.

Graph, contains graded vertical bars, HTML similar to:

<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>

Timeline, contains horizontal bars, HTML similar to:

<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>

Timeline is relatively positioned to Graph so that it overlaps. My problem is that when these divs overlap, the anchors in Timeline stop working. I am open to both CSS and Jquery solutions. Thanks in advance.

t.

Answer 1

One element will always be 'deactivated' when elements overlap. You can control the z-axis to define which element is at the top and thereby remains 'active'. Use css: z-index for that. Greater number means more in front.

sample:

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