How can I move my glass effect overlay backwards?

Question

I created an overlay with a blue background and reduced the opacity to give it a glassy/tint effect. The problem I'm having is trying to move it under my elements/containers (I guess calling in underlay makes more sense). I've tried using z-index: -1; but no luck. Any way to solve this?

body { 
  background: #00639e; /*Apply blue background to body*/    
 }

.white-overlay {
  background: #f6f9fc;
  opacity: 0.3;
  width: 100%;
  z-index: -1;
}

.block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  z-index: 999;
}

h1 {
  /*color: #000*/; /*Uncomment this to see difference between black and white colors*/
  color: #fff;

<div class="white-overlay">
  <div class="block">
    <h1>Hello World</h1>
  </div>
</div>

score 2 · Accepted Answer · answered Jul 07 '22 at 12:18

why not use RGBA or HSLA as background-color? The issue is caused because opacity is rendered last. As such z-index has no influence as it is rendered last and by definition then always on top of the entire element (incl. all child elements).

body { 
  background: #00639e; /*Apply blue background to body*/    
 }

.white-overlay {
  background: rgba(246, 249, 252, 0.3);
  width: 100%;
}

.block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  z-index: 999;
}

h1 {
  /*color: #000*/; /*Uncomment this to see difference between black and white colors*/
  color: #fff;

<div class="white-overlay">
  <div class="block">
    <h1>Hello World</h1>
  </div>
</div>

How can I move my glass effect overlay backwards?

1 Answers1