在叠加层上方放置一个按钮

Question

我有一个搜索屏幕 像这样

。单击搜索后，我正在显示带有叠加图的繁忙图像。 但是屏幕上有一个停止按钮，我无法单击，因为它在覆盖层下方。 您能帮忙解决这个问题吗？

   <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%;
 }

Answer 1

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

 #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;" />