4

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

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

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

感谢您的任何建议。

4

1 回答 1

3

穿上元素z-index: 999;。#sidebar这是因为您页面上的另一个元素位于同一区域但具有更高的堆栈顺序。

示例：http: //jsfiddle.net/bxCT8/

于 2013-05-18T13:28:40.017 回答