Checkboxes behind a div turned visible when their opacity is changed

I just found a very strange HTML behaviour: a checkbox normally hidden behind another element (like a div) becomes visible if its opacity or the opacity of its container is set below 1.

Here is the basic setup, we have a set of checkboxes behind a grey div:

.checkboxes {
  display: flex;
}

.tooltip {
  position: absolute;
  width: 300px;
  height: 20px;
  background-color: #ccc;
}

<div class="container">
  <div class="tooltip"></div>
  <div class="checkboxes">
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <span>Foo</span>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <span>Bar</span>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <span>Baz</span>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <span>FooBar</span>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <span>FooBaz</span>
      </label>
    </div>
  </div>
</div>

As expected, you cannot see the checkboxes. But if we change their opacity or the opacity of their containers, they do become visible:

.checkboxes {
  display: flex;
}

.tooltip {
  position: absolute;
  width: 300px;
  height: 20px;
  background-color: #ccc;
}

<div class="container">
  <div class="tooltip"></div>
  <div class="checkboxes">
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <span>Foo</span>
      </label>
    </div>
    <div class="checkbox" style="opacity: 0.5">
      <label>
        <input type="checkbox">
        <span>Bar</span>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <span>Baz</span>
      </label>
    </div>
    <div class="checkbox" style="opacity: 0.5">
      <label>
        <input type="checkbox">
        <span>FooBar</span>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <span>FooBaz</span>
      </label>
    </div>
  </div>
</div>

Of course we can avoid this by setting the z-index of the grey div:

.checkboxes {
  display: flex;
}

.tooltip {
  position: absolute;
  width: 300px;
  height: 20px;
  background-color: #ccc;
  z-index: 10;
}

<div class="container">
  <div class="tooltip"></div>
  <div class="checkboxes">
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <span>Foo</span>
      </label>
    </div>
    <div class="checkbox" style="opacity: 0.5">
      <label>
        <input type="checkbox">
        <span>Bar</span>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <span>Baz</span>
      </label>
    </div>
    <div class="checkbox" style="opacity: 0.5">
      <label>
        <input type="checkbox">
        <span>FooBar</span>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <span>FooBaz</span>
      </label>
    </div>
  </div>
</div>

Therefore, the solution is obvious, but nevertheless I still have a question: why did that happen in the first place? What's the reason for the difference between the first and second snippets?