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

学习前端遇到的问题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 超声波 合成孔径 扩散角
  • ¥20 matlab中的双层数值积分
  • ¥50 服务器打印水晶报表问题
  • ¥15 Delphi image图片缩放问题
  • ¥30 gradle环境下javafx项目如何使用druid连接池
  • ¥15 服务器打印水晶报表问题
  • ¥15 初学者用plt报错,求解答
  • ¥18 深度学习tensorflow1,ssdv1,coco数据集训练一个模型
  • ¥100 关于注册表摄像头和麦克风的问题
  • ¥30 代码本地运行正常,但是TOMCAT部署时闪退