html - Setting position:absolute prevents me from clicking links in one div? -

i have sidebar, in there 2 sections. on section teo can colick links fine. on section 1 (lorem ipsum - prescriptions 1)setting position absolute on sidebar div, prevents me clicking links. why this?

html

<div class="container" style="background-color:white; position:relative;   top:-20px;     height:900px;">        <div id="sidebar" style="margin-top:10px;position:absolute;"> <div id="contentdiv" style="width:250px; height:300px; position:relative; background-    image:url('/img/grey_gradient.png');"> <br /> <p style="margin-left:20px;">lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  <p style="margin-left:20px;">our services</p> <ul class="unstyled" style="margin-left:30px;"> <li><img src="img/home_icon.png" /><a href="#">    home visits</a></li> <p></p> <li><img src="img/clock_icon.png" /><a href="#">    round clock doctors</a></li> <p></p> <li><img src="img/appoitment_icon.png" /><a href="#">    appointment booking</a></li> <p></p> <li><img src="img/perscription_icon.png" /><a href="#">    perscriptions1</a></li> </ul> <br /> <p style="font-size:20px;color:green; margin-left:20px;">latest news  <img src="img/news_icon.png" /></p> <p style="border-top: 1px solid #000000; width:200px; margin-left:20px;">  </p> <ul class="unstyled" style="margin-left:30px;"> <p style="color:gray; font-size:14px;">18th may</p> <li><a href="#" style="color:blue;">  <b>patients throw pie in times square. medication had been tampered with...</b></a></li> <p></p> <li><li><a href="#" style="color:blue;">  <b>patients throw pie in times square. medication had been tampered with...</b></a></li></li> <p></p> <li><li><a href="#" style="color:blue;">  <b>patients throw pie in times square. medication had been tampered with...</b></a></li></li> <p></p> <li><img src="img/perscription_icon.png" /><a href="#">    perscriptions</a></li> </ul> </div> </div>  <div style="position:relative"> <div id="slider" style="margin-top:10px;"  > <img style="margin-left:0px; " src="img/nha_comp.png" /> </div>  </div>  </div> 

css:

 body  {     background-color:#59dbff;     margin-top:10px;     background-image:url('/img/back_img.png');     background-repeat:repeat-x; }  #pageheader{     position:relative;     width:900px;     height:94px;     background-color:white;     margin:0 auto;  }  #nhslogo {     position:absolute;     margin-left:40px;     float:left; }  #openinghours {     position:absolute;     margin-left:500px;     float:right;  }  #navmenu {     position:relative;     background-color:white;     width:900px;     height:50px; }  #navlist {     position:relative;     background-image:url('/img/navimage.png');     background-repeat:repeat-x;     margin-left:225px;     }  #navlist {     position:relative;     color:white;     top:50%;     margin-top:20px; }  #contentdiv {       background-repeat:repeat-x;      -webkit-border-radius: 10px;      -moz-border-radius: 10px;           border-radius: 10px;  }  #contentdiv p {     font-size:16px;     color:black; }  #sidebar {     position:relative;     margin-left:10px;     margin-top:100px; }  #slider {      position:relative;     margin-left:300px;     margin-top:-300px;       background-repeat:repeat-x;      -webkit-border-radius: 10px;      -moz-border-radius: 10px;           border-radius: 10px;           width:560px;            height:300px;   }  hr {     color:black;     width:150px; }  #pagefooter{         position:absolute;       width:900px;     height:170px;     background-color:#fff;     bottom: 0;     margin:0px;     right:25%;     left:50%;     margin-left:-450px;     border-top:1px solid gray;      border-left:30px;     border-right:30px; } 

thanks suggestions.

put z-index: 999; on #sidebar element. because element on page positioned in same area has higher stack order.

example: http://jsfiddle.net/bxct8/