겹치는 div가있는 앵커

Question

두 개의 주요 섹션이있는 격자 기반 레이아웃을 사용하고 있습니다. 그래프와 타임 라인.

그래프에 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> 

시간 :

<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가 겹칠 때 타임 라인의 앵커가 작동하지 않는다는 것입니다. 나는 CSS와 Jquery 솔루션 모두에 대해 개방적이다. 미리 감사드립니다.

t.

Answer 1

요소가 겹칠 때 하나의 요소가 항상 '비활성화'됩니다. z 축을 제어하여 맨 위에있는 요소를 정의하고 '활성'상태로 유지할 수 있습니다. css : z-index을 사용하십시오. 숫자가 클수록 앞에 더 많은 의미가 있습니다.

샘플 :

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