边框应用于错误的元素

Question

我有一个带有 border-right CSS 的侧边导航栏。但是 border-right 也被应用于 header。即使使用 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

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

Answer 2

给#header一个背景色。目前它尚未设置，因此是透明的。因为这个元素 "underneath" #header 将显示。

Answer 3

删除 ul 上的保证金并添加顶部位置 #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/

边框应用于错误的元素

Border getting applied to wrong element

html

css

css-position

nav