学习前端遇到的问题1: 为什么没有被覆盖？

<header>
  <div class="header-1">1</div>
  <div class="header-2">2</div>
  <button class="btn-mobile-nav">
    <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
    <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
  </button>
</header>
<script type="module" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.js"></script>

header {
  position: relative;
  display: flex;
  justify-content: space-around;
  background-color: red;
  height: 3rem;
}

div {
  width: 2rem;
  background-color: blue;
}

.header-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: red;
}

按道理讲，button元素应该被div.header-2覆盖掉啊？
交换button和div元素后，button元素可以又可以被覆盖掉了?

<header>
 <div class="header-1">1</div>
<button class="btn-mobile-nav">
   <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
   <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
 </button>
 <div class="header-2">2</div>

</header>
<script type="module" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.js"></script>

如果将button元素换成div元素，div元素会被覆盖掉。

<header>
 <div class="header-1">1</div>
 <div class="header-2">2</div>
<div class="header-3">3</div>
</header>
<script type="module" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.js"></script>

没有覆盖button元素的原因应该和ion-icon有关，不太清楚原因。

有一些新的发现：

没有被覆盖不是button,而是ion-icon。如果button没有被覆盖的话，除了显示ion-icon之外，还应该显示白色的背景，边框。
在ion-icon上添加z-index:-999,它依然没有被覆盖。在header-2上添加z-index: 9999，覆盖了ion-icon。
没有在ion-icon内部发现和z-index相关的设置。

代码地址 https://codepen.io/perterhuan/pen/qBozMYG

你自己的分析已经考虑的很全面了，我比较同意你说的ion-icon自己的样式影响问题。
至于放置位置我认为是没有影响的，主要是button内的icon样式影响，筛选是否有position和层级z-index指定

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

定位时，css有个z-index属性，这里你的button在那个div下面，默认z-index属性值就比div大，所以不会被覆盖，等你交换这两个位置的时候，默认div的z-index属性值就大，所以就被覆盖了。你可以手动设置z-index的值。可以查一下这个属性。
有帮助的话采纳一下哦🐶

应该是与层叠级别有关

加上z-index层级