Question

我有一个带border-right CSS的侧面导航栏。但border-right也适用于标头。即使在使用z-index之后也没有结果。

HTML

<div id="sideNav" class="visible-lg">
  <ul>
    <li>
      <a class="active" href="#">Dashboard</a>
    </li>
    <li>
      <a href="#">Content1</a>
    </li>
    <li>
      <a href="#">Content2</a>
    </li>
  </ul>
</div>

<div id="header">
  <div>
    <img src="http://placehold.it/220x37" alt="logo" style="margin-left: 10px; width: 70%;" />
  </div>
  <div style="margin-left: 20%">
    <label class="projTitle">App Name</label>
  </div>
</div>

<div id="mainContent">
  <div class="body-content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur congue diam, ut posuere ante. Proin sed ligula quis neque commodo accumsan. Ut vitae sollicitudin ex, consequat vestibulum lacus. Nullam volutpat turpis sed posuere faucibus.
    </p>       
  </div>
</div>

CSS

* {
  margin: 0;
}

body {
  font-family: Sans-Serif;
  position: relative;
}

.form-control {
  width: 95%;
}

#header {
  position: relative;
  color: #0b4faa;
  display: flex;
  align-items: center;
  width: 100%;
  height: 70px;
  -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5);
  box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.5);
  border-bottom: 0.02em solid #c1c1c1;
  z-index:508;
}

label.projTitle {
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#sideNav {
  border-right: 0.02em solid #c1c1c1;
  height: 100%;
  position: fixed;
  width: 220px;
  z-index:504;
}

#sideNav ul {
  margin-top: 70px;
  list-style-type: none;
  padding: 0;
}

#sideNav a {
  text-decoration: none;
  font-size: 14px;
  text-transform: uppercase;
  display: block;
  padding: 5%;
  transition: all 0.25s ease-out;
}

#sideNav ul li {
  border-bottom: 1px solid;
  border-bottom-color: #fff;
  letter-spacing: 0.04em;
}

#sideNav ul li:not(.active) a:hover {
  background: rgba(0, 0, 0, 0.2);
}

.active {
  background: rgba(0, 0, 0, 0.2);
  border-left: 5px solid;
  border-left-color: #337ab7;
}

.active a {
  color: #0b4faa;
  font-weight: 600;
}

#mainContent {
  height: 100%;
  margin-left: 200px;
  z-index: 20;
}

.body-content {
  margin: 0 45px;
}

Fiddle

Answer 1

给#header一个背景色。目前它没有设置，因此是透明的。由于这些元素“下方”#header将会显示。

Answer 2

删除ul＆amp; amp;添加首位#sideNav

#sideNav {
    border-right: 0.02em solid #c1c1c1;
    height: 100%;
    position: fixed;
    top: 70px;
    width: 220px;
    z-index: 504;
}
#sideNav ul {
    list-style-type: none;
    margin-top: 0px;
    padding: 0;
}

https://jsfiddle.net/abxnkveu/2/

Answer 3

从#sideNav删除边框并添加到ul

#sideNav {
    height: 100%;
    position: fixed;
    width: 220px;
    z-index: 504;
}
#sideNav ul {
    margin-top: 70px;
    list-style-type: none;
    padding: 0;
    border-right: 0.02em solid #c1c1c1;
    height: 100%;
}

或者

从ul中删除margin-top并添加到#sideNav

#sideNav {
    margin-top: 70px;
    border-right: 0.02em solid #c1c1c1;
    height: 100%;
    position: fixed;
    width: 220px;
    z-index: 504;
}
#sideNav ul {
    list-style-type: none;
    padding: 0;
}

边界被应用于错误的元素

3 个答案: