What Has Bigger Priority: Opacity or Z-Index in Browsers

What has bigger priority: opacity or z-index in browsers?

This is not a bug and is actually how it's supposed to work. It's a bit confusing as the elaborate description of Stacking Contexts doesn't mention anything about it. However, the visual formatting module links to the color module where this particular gotcha can be found (emphasis mine):

Since an element with opacity less than 1 is composited from a single
offscreen image, content outside of it cannot be layered in z-order
between pieces of content inside of it. For the same reason,
implementations must create a new stacking context for any element
with opacity less than 1. If an element with opacity less than 1 is
not positioned, implementations must paint the layer it creates,
within its parent stacking context, at the same stacking order that
would be used if it were a positioned element with ‘z-index: 0’ and
‘opacity: 1’. If an element with opacity less than 1 is positioned,
the ‘z-index’ property applies as described in [CSS21], except that
‘auto’ is treated as ‘0’ since a new stacking context is always
created. See section 9.9 and Appendix E of [CSS21] for more
information on stacking contexts. The rules in this paragraph do not
apply to SVG elements, since SVG has its own rendering model ([SVG11],
Chapter 3).

What has bigger priority: opacity or z-index in browsers?

This is not a bug and is actually how it's supposed to work. It's a bit confusing as the elaborate description of Stacking Contexts doesn't mention anything about it. However, the visual formatting module links to the color module where this particular gotcha can be found (emphasis mine):

Since an element with opacity less than 1 is composited from a single
offscreen image, content outside of it cannot be layered in z-order
between pieces of content inside of it. For the same reason,
implementations must create a new stacking context for any element
with opacity less than 1. If an element with opacity less than 1 is
not positioned, implementations must paint the layer it creates,
within its parent stacking context, at the same stacking order that
would be used if it were a positioned element with ‘z-index: 0’ and
‘opacity: 1’. If an element with opacity less than 1 is positioned,
the ‘z-index’ property applies as described in [CSS21], except that
‘auto’ is treated as ‘0’ since a new stacking context is always
created. See section 9.9 and Appendix E of [CSS21] for more
information on stacking contexts. The rules in this paragraph do not
apply to SVG elements, since SVG has its own rendering model ([SVG11],
Chapter 3).

Possible Opacity Z-Index Bug

This issue is already known.
https://www.google.com/#q=opacity%20change%20z-index

You should use rgba background, which is also a widely supported property.

Checkboxes behind a div turned visible when their opacity is changed

This is caused because opacity causes a new stacking context. This can also happen with the following CSS properties:

• opacity
• CSS Transforms
• Filters
• CSS Regions
• Paged Media

Rule 8.2: All opacity descendants with opacity less than 1, in tree order, create a stacking context generated atomically.

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

<div class="container">  <div class="tooltip"></div><!-- own stack context and above the other elements -->  <div class="checkboxes">    <div class="checkbox" style="opacity:0.5"><!-- own stack context and later on the painting order than position -->      <label>        <input type="checkbox">        <span>Bar</span>      </label>    </div>    <div class="checkbox">      <label>        <input type="checkbox">        <span>Bar</span>      </label>    </div>  </div></div>

<div class="wrapper tweak">
    <div class="overlay"> 
        <p>The Overlay Panel</p>
    </div>
    <div class="content">
        <p>The main Content panel with a motif: 
           <b>♥</b> <b class="foggy">♠</b></p>
    </div>
</div>

.wrapper {
    position: relative;
    outline: 1px solid blue;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    border: 1px dotted blue;
    width: 400px;
}

.content p b {
    background-color: black;
    color: white;
    padding: 0 10px;
    opacity: 1.0; /* default value */
}
.content p b.foggy {
    opacity: 0.4;
}

.tweak .overlay {
    z-index: 1;
}