Html 设置位置：绝对阻止我点击一个div中的链接？

我有一个侧边栏，其中有两个部分。现在在teo部分，我可以很好地查看链接。但是在第一节（Lorem ipsum-处方1）中，在侧边栏div上设置绝对位置会阻止我点击链接。为什么会这样

Html

---

谢谢你的建议。

放置

z-index:999#侧栏

元素上的code>。这是因为页面上的另一个元素位于同一区域，但具有更高的堆栈顺序

---

示例：

它很可能被另一个div“覆盖”。你可以使用z-index来操纵它们的顺序。我能告诉你的最好的有用信息是，如果你没有；不要绝对使用定位，那么就不要。每个浏览器的位置都不一样，而且很混乱。我会尝试使用一些溢出和浮动，而不是定位。谢谢你的评论，是z索引解决了这个问题。谢谢你，是z索引解决了这个问题。那么，z索引到底是什么，为什么在这种情况下有效呢+1@Callum如果考虑x和y坐标，其中x是水平距离，y是垂直距离。那么z是一个项目离你的距离。这就好像元素是三维的，并且彼此堆叠在一起，z索引越高，元素在堆栈中的位置就越高。因此，如果您将z索引设置为非常高的值，那么您可以确保它位于堆栈顶部，并且不会被任何重叠元素覆盖。这有意义吗？啊，我明白了，是的，有意义。它基本上决定了你的div在哪一层。

<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 the 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. Their medication had been tampered with...</b></a></li>
<p></p>
<li><li><a href="#" style="color:Blue;">  <b>Patients throw pie in times square. Their 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. Their 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>

 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 a
{
    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;
}