поместите кнопку поверх оверлея

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