学习前端遇到的问题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相关的设置。
