CSS - Background Opacity Not Working - html

Question

I want a parent div to fill the screen with a transparent background but I can't seem to get this to work with the following code.
The parent div only appears as a solid colour.
Any ideas what I'm doing wrong:
.outer {
position: relative;
z-index: 1;
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
}
.inner {
position: absolute;
width: 100%;
top: 50px;
background-color: white;
padding: 20px;
}
<div class="outer">
<div class="inner">
<h5>Search</h5>
</div>
</div>

Answer 1

Your are using 50% opaque white on 100% opaque white. How exactly do you expect that to become visible?
Also, your body has a computed height of 0. That makes .outer have 100% of 0 - guess what that is...
html, body { height: 100%; }
body { background-color: #f0f0f0; }
.outer {
position: relative;
z-index: 1;
background-color: rgba(200, 0, 0, 0.5);
height: 100%;
}
.inner {
position: absolute;
width: 100%;
top: 50px;
padding: 20px;
}
<div class="outer">
<div class="inner">
<h5>Search</h5>
</div>
</div>

Answer 2

Use the vh (viewport height) instead of the 100% height. When you use the 100% height, it takes the 100% of parent and the parent is body which height is 0px.
.outer {
position: relative;
z-index: 1;
background-color: rgb(255, 255, 255, 0.5);
height: 100vh;
}
.inner {
position: absolute;
width: 100%;
top: 50px;
background-color: white;
padding: 20px;
}
<div class="outer">
<div class="inner">
<h5>Search</h5>
</div>
</div>

Answer 3

parent div's opacity wont achieved when there is a solid background on the child and the .outer as no height so its not possible to show it. (because of position:absolute)
May be reverse these backgrounds and give position relative will make u understandable about how it works like below.
Note:Even position:absolute; in both places makes some sense
.outer {
position: relative;
background-color: red;
z-index: 1;
height: 100%;
}
.inner {
position: relative;
width: 100%;
top: 50px;
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
}
<div class="outer">
<div class="inner">
<h5>Search</h5>
</div>
</div>

Answer 4

As others have pointed out, a div with a white background won't work when overlapping another white element.
However, even if you were to change the colour of .outer to grey (as I've done in my example), it still won't fill the full height of the screen.
Instead of using height: 100%, you can view height: 100vh to fill the screen. You can learn more about vh (Viewport-percentage) from this article.
Here's a work example:
.outer {
position: relative;
z-index: 1;
background: rgba(0, 0, 0, .5);
height: 100vh;
}
.inner {
position: absolute;
width: 100%;
top: 50px;
background-color: white;
padding: 20px;
}
<div class="outer">
<div class="inner">
<h5>Search</h5>
</div>
</div>