Element disappears when not setting opacity: 0.99 - html

Question

I created a responsive page which has a box with text and blurred background. The page is available here on JSFiddle.
The problem is: .content element is not visible without setting its opacity to 0.99. Why?
HTML
<div class="content-box">
<div class="content-bg"></div>
<div class="content">
<p>Text with blurred background</p>
<p>Text with blurred background</p>
</div>
</div>
CSS
body {
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
overflow: hidden;
}
.content-box {
position: relative;
width: 300px;
overflow: hidden;
}
.content-bg {
position: absolute;
background-size: cover;
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
filter: blur(5px);
-webkit-filter: blur(5px);
}
.content {
border-radius: 10px;
z-index: 100;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0.99999; /* Does not work without this wtf */
color: white;
}
.content :first-child { margin-top: 0px }
JS
function updateBackground() {
var contentBox = $(".content-box");
var bg = $(".content-bg");
bg.css("left", -(contentBox.offset().left));
bg.css("top", -(contentBox.offset().top));
bg.width($(window).width());
bg.height($(window).height());
}
$(window).resize(function() {
updateBackground();
});
updateBackground();

Answer 1

Why does the code not work without opacity?
This is because your content element seems to be behind the content-bg element. The z-index has no effect because there is no position property assigned to it.
Why does it work when opacity of 0.99 is added?
As mentioned by BoltClock in this answer, adding a opacity less than 1 automatically creates a new stacking context (similar to adding z-index to a positioned element). This brings content element forward and thus it gets displayed.
What is the ideal solution?
Adding position: relative would make the z-index work as expected (which is bring the element above content-bg) and that would solve the issue.
function updateBackground() {
var contentBox = $(".content-box");
var bg = $(".content-bg");
bg.css("left", -(contentBox.offset().left));
bg.css("top", -(contentBox.offset().top));
bg.width($(window).width());
bg.height($(window).height());
}
$(window).resize(function() {
updateBackground();
});
updateBackground();
body {
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
overflow: hidden;
}
.content-box {
position: relative;
width: 300px;
overflow: hidden;
}
.content-bg {
position: absolute;
background-size: cover;
background-image: url('http://hazor.iki.fi/2003/juhannus/isot/DSCN9068-Maisema.jpg');
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
background-size: no-repeat fixed center center cover;
filter: blur(5px);
-webkit-filter: blur(5px);
}
.content {
position: relative; /* add this */
border-radius: 10px;
z-index: 100;
background-color: rgba(0, 0, 0, 0.7);
color: white;
}
.content:first-child {
margin-top: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-box">
<div class="content-bg"></div>
<div class="content">
<p>Text with blurred background</p>
<p>Text with blurred background</p>
</div>
</div>