HH123_3 2022-08-29 10:14 采纳率: 85.7%
浏览 103
已结题

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

学习前端遇到的问题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

  • 写回答

5条回答 默认 最新

  • 飞鱼爱吃米 2022-08-29 14:32
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 9月8日
  • 已采纳回答 8月31日
  • 修改了问题 8月29日
  • 修改了问题 8月29日
  • 展开全部

悬赏问题

  • ¥15 静电纺丝煅烧后如何得到柔性纤维
  • ¥15 (标签-react native|关键词-镜像源)
  • ¥100 照片生成3D人脸视频
  • ¥15 伪装视频时长问题修改MP4的时长问题,
  • ¥15 JETSON NANO
  • ¥15 VS开发qt时如何在paintgl函数中用pushbutton控制切换纹理
  • ¥20 关于 openpyxl 处理excel文件地问题
  • ¥15 MS中不知道高分子的构型怎么构建模型
  • ¥60 QQOP数据,什么是op数据号,怎么提取op数据!能不能大量提取(语言-c语言)
  • ¥15 matlab代码 关于微分方程和嵌套的分段函数。