Question

我有一个侧边栏，其中有两个部分。现在在节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;
}

感谢您的任何建议。

Answer 1

将z-index: 999;放在#sidebar元素上。这是因为页面上的另一个元素位于同一区域，但堆栈顺序较高。

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

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

1 个答案: