Якоря с перекрывающимися элементами - PullRequest
Новая
       8

Якоря с перекрывающимися элементами

1 голос
/ 03 марта 2010

Я использую сетку с двумя основными разделами. График и временная шкала.

График, содержит градуированные вертикальные полосы, 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>

Временная шкала относительно позиционирована на График, так что она перекрывается. Моя проблема заключается в том, что когда эти элементы перекрываются, якоря на временной шкале перестают работать. Я открыт как для CSS, так и для Jquery. Заранее спасибо.

т.

1 Ответ

0 голосов
/ 03 марта 2010

Один элемент всегда будет «деактивирован», когда элементы перекрываются. Вы можете управлять осью z, чтобы определить, какой элемент находится сверху и, таким образом, остается «активным». Для этого используйте css: z-index . Большее число означает больше впереди.

образец: 

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