Opacity of div container affecting child : <p>I have a container with a background and opacity set. In it, I have a child. I want the child to appear to be on top of the container, but it isn't, the opacity affects the child. </p>

<p><a href="https://i.stack.imgur.com/1wvdu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1wvdu.png" alt="enter image description here"></a></p>

<p>Here's the HTML</p>

<pre><code>&lt;div class="container"&gt;
   &lt;div class="child"&gt;some label&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And CSS:</p>

<pre><code>.container {
    position: absolute;
    top: 0;
    width: 200px;
    height: 200px;
    opacity: 0.5;
    background-color: lightblue;
    z-index: 10;
</code></pre>

<p>}</p>

<pre><code>.child {
    position: absolute;
    right: 0;
    bottom: 0;
}
</code></pre>

<p>For other reasons, the container must have a position of absolute. </p>

<p>The jsfiddle is <a href="https://jsfiddle.net/jv0tt5rz/1/" rel="nofollow noreferrer">here</a>.</p>

<p>How can I avoid the opacity of the container affecting the child?</p>
