Как сделать прозрачную панель HTML с обычными детьми?

Question

Моя панель <div> или же <span>, На самом деле он невидим, но как сделать его прозрачным для щелчков мышью? Вы видите, что первая кнопка получает больше 1 на каждый клик на экране. Однако поезд останавливается, когда вы нажимаете кнопки в верхней правой невидимой панели. Вместо этого он выбирает кнопки, что означает, что панель не полностью прозрачна и перехватывает события мыши.

#controls {
    left: 0; top: 0;
    position: absolute; 
    margin: 0;
    padding: 0;

}
#rest {
    background-color:red;
    left: 0; top: 0;
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

<div id="rest" onclick="javascript:button1.innerHTML += 1"></div>
<div id="controls">  
    <button id="button1">button11111111111111111</button><br />
    <button>button3</button> <br><button>button5</button><br />
    <button>button4</button>
</div>

Answer 1

Вы пытались изменить цвет фона на прозрачный?

background-color: transparent;

Answer 2

Это просто: сделать панель виртуальной. Хотя удаление div может иметь некоторые последствия, пример исправляется, если мы применяем стили к элементам управления, а не к родительской панели.

.controls {
    left: 0; top: 0; position: relative; margin: 0; padding: 0;
}
#rest {
    background-color:red; left: 0; top: 0; position: absolute; margin: 0; padding: 0; width: 100%; height: 100%;
}

<div id="rest" onclick="javascript:button1.innerHTML += 1"></div>
    <button class="controls" id="button1">button11111111111111111</button><br />
    <button class="controls">button3</button> <br><button class="controls">button5</button><br />
    <button class="controls">button4</button>

Мы можем даже покинуть панель. Просто настройте его z-порядок отдельно

.controls {
    left: 0; top: 0; position: relative; margin: 0; padding: 0;
}
#rest {
    background-color:red; left: 0; top: 0; position: absolute; margin: 0; padding: 0; width: 100%; height: 100%;
}

<div id="rest" onclick="javascript:button1.innerHTML += 1"></div>
  <div id="controls">
  <button class="controls" id="button1">button11111111111111111</button><br />
    <button class="controls">button3</button> <br><button class="controls">button5</button><br />
    <button class="controls">button4</button>
</div>