Question

如果我在没有bootstraps容器和行等的情况下运行代码，它确实有用但是，如果我在容器等内部运行像这个片段的代码，那么ahref就无法正常工作！除非我删除z-index，但我希望菜单看起来像是现在。
这已经困扰了我几个小时了，我需要一个有不同方式“看”这个问题的人。

.row.content {
  height: 200px;
  margin: 20px 0px;
}

.main {
  border: 1px solid #600d17;
  border-radius: 4px;
  margin-top: 20px;
}

.sidenav {
  padding-top: 20px;
  height: 100%;
}

.sidenav a:hover {
  color: #550d15;
}

header {
  padding: 30px;
  border-bottom: 3px solid #600d17;
}

footer {
  padding: 30px;
  border-top: 3px solid #600d17;
}

#somename {
  border: 1px solid #600d17;
  border-radius: 4px;
  height: 200px;
  background-color: #600d17;
  position: relative;
  z-index: -1;
  /* If i delete this, everything works... */
}

#somename a {
  padding: 10px;
  display: block;
  text-decoration: none;
}

#topheader {
  border: 1px solid #460a11;
  border-radius: 4px;
  background-color: #460a11;
  padding: 10px 4px;
  height: 50px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>sometitle</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <header class="container-fluid">
    Header text
  </header>

  <div class="container">
    <div class="row content">
      <div class="col-xs-3 sidenav">
        <div id="topheader">
          <p>Menu</p>
          <div id="somename">
            <a href="#">somelink</a>
            <a href="#">somelink</a>
          </div>
        </div>
      </div>

      <div class="col-xs-6 main">
        <section>
          <h1>Title content</h1>
          <p>
            Some story...
          </p>
        </section>
      </div>

      <div class="col-xs-3 sidenav">
        right menu
      </div>

    </div>
  </div>

  <footer class="container-fluid text-center">
    <p>Footer Text</p>
  </footer>

</body>

</html>

Answer 1

您的身份somenname位于外部身份topHeader内。

您只需在{2}单独z-index上使用div

分开topheader和somename

现在通过以下代码在topheader上重叠somename：

#topheader{
    z-index:2;
    position:relative;
}
#somename{
    z-index:1;
}

.row.content {
  height: 200px;
  margin: 20px 0px;
}

.main {
  border: 1px solid #600d17;
  border-radius: 4px;
  margin-top: 20px;
}

.sidenav {
  padding-top: 20px;
  height: 100%;
}

.sidenav a:hover {
  color: #550d15;
}

header {
  padding: 30px;
  border-bottom: 3px solid #600d17;
}

footer {
  padding: 30px;
  border-top: 3px solid #600d17;
}

#somename {
  border: 1px solid #600d17;
  border-radius: 4px;
  height: 200px;
  background-color: #600d17;
  position: relative;
  margin: -10px 5px 0px 5px;
  z-index: 1;
  /* If i delete this, everything works... */
}

#somename a {
  padding: 10px;
  display: block;
  text-decoration: none;
}

#topheader {
  border: 1px solid #460a11;
  border-radius: 4px;
  background-color: #460a11;
  padding: 10px 4px;
  height: 50px;
  z-index: 2;
  position: relative;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>sometitle</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <header class="container-fluid">
    Header text
  </header>

  <div class="container">
    <div class="row content">
      <div class="col-xs-3 sidenav">
        <div id="topheader">
          <p>Menu</p>
        </div>
        <div id="somename">
          <a href="#">somelink</a>
          <a href="#">somelink</a>
        </div>
      </div>

      <div class="col-xs-6 main">
        <section>
          <h1>Title content</h1>
          <p>
            Some story...
          </p>
        </section>
      </div>

      <div class="col-xs-3 sidenav">
        right menu
      </div>

    </div>
  </div>

  <footer class="container-fluid text-center">
    <p>Footer Text</p>
  </footer>

</body>

</html>

菜单链接在Bootstrap中不起作用

1 个答案: