html - 侧边栏链接不可点击

Question

我正在制作一个包含 3 个内容框的网站。

方框 1 是我的标题，方框 2 是侧边栏，方框 3 是页面内容。

所以看起来像这样:

    |   HEADER
----|--------------------------
    |
 S  |   PAGE CONTENT
 I  |
 D  |
 E  |
 B  |
 A  |
 R  |
    |

我现在得到的侧边栏代码是这样的:

https://jsfiddle.net/zr90fk05/

首页:

    <div style="z-index: 5; margin-left: 30.5% !important; width: 780px !important; height: 215px;" id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>


  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img style="width: 780px; height: 215px;" src="#" alt="...">
      <div class="carousel-caption">
          <div class="carousel-caption"><p style="font-size: 20px; margin-left: -100%; margin-bottom: 40%;">Design is not for philosophy, it's for life.</p></div>
      </div>
    </div>
    <div class="item">
      <img style="width: 780px; height: 215px;" src="#" alt="...">
      <div class="carousel-caption">
          <p style="font-size: 20px;">Fashion is architecture: it is a matter of proportions.</p>
      </div>
    </div>
    <div class="item">
      <img style="width: 780px; height: 215px;" src="#" alt="...">
      <div class="carousel-caption">
          <p style="font-size: 20px; margin-left: -20%;">The details are not the details. They make the design.</p>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#" class="carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#" class="carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div> <!-- Carousel -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- 4 blocks to sub pages -->

<div style="z-index: 5; width: 1024px; margin: 0 auto;">

<div style="float: left; margin-left: 20%;"><a href="huiden"><img style="padding: 10px; background: #C6A970; border: 1px solid #ffffff; width: 367; height: 245;" src="#"  alt="" /></div>
</a>

<div style="float: right; margin-right: 40px;"><a href="geweien"><img style="padding: 10px; background: #C6A970; border: 1px solid #ffffff; width: 367; height: 245;" src="#" alt=""/></div>
</a>

<br />
<br />

<div style="float: left; margin-left: 20%;"><a href="wonen"><img style="margin-top: 40px; margin-bottom: 1%; background: #C6A970; padding: 10px; border: 1px solid #ffffff; width: 367; height: 245;" src="#" alt="" /></a></div>

<div style="float: right; margin-right: 40px;"><a href="accessoires"><img style="margin-top: 40px; margin-bottom: 1%; padding: 10px; background: #C6A970; border: 1px solid #ffffff; width: 367; height: 245;" src="#" alt="" /></div>
</a></div>

<br />
<br />


</div>

但是我的页面内容有这个 CSS:

<div style="margin-left: 30% position: relative;">

我认为这是我的问题，导致我无法点击边栏中的链接。

我做错了什么？或者我需要更改什么？

提前致谢!

Answer 1

我通过添加这个解决了我的问题:

.sidebar {
    position: absolute;
}