Element中el-row中的元素会随着页面滚动而显示在fixed元素上方的解决方法

问题速览

template代码：

<el-container>
  <el-header id="header">
    <el-menu
      router
      id="header-menu"
      mode="horizontal"
      background-color="#409EFF"
    >
      <el-menu-item id="header-menu-item" index="2">个人信息</el-menu-item>
      <el-menu-item id="header-menu-item" index="/shop">
        奖励商店
      </el-menu-item>
    </el-menu>
  </el-header>
  <el-row> 123<br /><br /><br /><br /><br /><br /><br /><br /> </el-row>
</el-container>

css代码：

* {
  padding: 0px;
  margin: 0px;
  border: 0px;
}
#header {
  padding: 0;
}
#header-menu {
  position: fixed;
  top: 0;
  width: 100%;
  width: 101;
  height: 40;
}
#header-menu-item {
  color: white;
  float: right;
}

解决方案

图中的情况应该是元素叠加显示次序错误的结果。要想修改元素的叠加次序，要用到z-index这个属性。我们只需要让el-menu的z-index属性值大于el-row的即可。经测试，凡大于1的值都可以解决这个问题。

修改后的css代码

* {
  padding: 0px;
  margin: 0px;
  border: 0px;
}
#header {
  padding: 0;
}
#header-menu {
  position: fixed;
  z-index: 1;  /*添加这行代码*/
  top: 0;
  width: 100%;
  width: 101;
  height: 40;
}
#header-menu-item {
  color: white;
  float: right;
}

z-index简介

z-index可以设置元素在重叠时的覆盖模式。z-index值越大，元素的覆盖优先级越高。也就是说，z-index值比其小的元素都显示在它的下面。

示例：

来自https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index

html代码

<div class="dashed-box">Dashed box
  <span class="gold-box">Gold box</span>
  <span class="green-box">Green box</span>
</div>

css代码

.dashed-box { 
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box { 
  position: absolute;
  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box { 
  position: absolute;
  z-index: 2; /* put .green-box above .dashed-box */
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}

结果