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

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