时间戳

首页 > 解决方案 > 在叠加层顶部放置一个按钮

css - 在叠加层顶部放置一个按钮

问题描述

我有一个这样的搜索屏幕

在此处输入图像描述 . 单击搜索时，我正在显示带有叠加层的繁忙图像。但是屏幕上有一个停止按钮，我无法单击它，因为它位于覆盖下方。你能帮忙解决这个问题吗？

   <input type="button" value="Stop" style="z-index: 100;position: absolute;" />

 #overlay {
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 97.5%; 
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);    
   z-index: 2;
   height:97.5%%;
   margin-top: .4%;
 }

标签： cssinput-field

解决方案

如果您单独测试它，它可以工作。但我认为问题在于您的停止按钮是具有相对位置的元素的子元素。也许您必须使整个侧边栏菜单成为绝对或不被覆盖覆盖。尝试将停止按钮与加载程序图像放在同一级别，这样会更全面。

 #overlay {
  position: fixed; 
  display: block; 
  width: 100%; 
  height: 97.5%; 
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);    
   z-index: 2;
   height:97.5%%;
   margin-top: .4%;
 }
<div id="overlay"></div>
<input type="button" value="Stop" style="z-index: 100;position: absolute;" />

推荐阅读