How can I blur div tag and edit index?

Question

I have nested div tags. I want to change their z-index value and make blur which is on back position. But it's not working. I think, in my codes only back div is blurred but my inputs are blurred as well which are located in front div. Thank you for your helps.

.div_front{
 background-color: antiquewhite;
}

.div_back
{   border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
 filter: blur(2px);
    z-index: -1;
}

<div class="div_back">
   <div class="div_front">
   <form>
     <label for="username"></label>
     <input type="text" id="username" name="username" style="text-align:center" placeholder="username">
     <label for="password"></label>
     <input type="text" id="password" name="password"  style="text-align:center" placeholder="password">     
     <input type="submit" value="Sign In"> 
     <div style="display:flex; padding:0px;">
     <input type="submit_reset" value="Forgot password?" style="margin-right:5px;">
     <input type="submit_signup" value="Sign Up">
     </div>
    </form>
   </div>  
</div>

_“in my codes only back div is blurred but my inputs are blurred as well which are located in front div”_ – they are _not_ “in front” of that div, they are _inside_ it, they are descendants. And blurring an element effects _all_ of its content, you can not blur an element only and have its descendants be unaffected by that. You need a separate element. — CBroe, Sep 21 '16 at 08:17
@CBroe thank you so much for your explanation. So the issue is clear. This was important for me to get it better. — Johnny, Sep 21 '16 at 08:30

score 1 · Accepted Answer · answered Sep 21 '16 at 08:09

you can achieve this by putting div_back in absolute position in new .container

check the edit in the HTML

.div_front{
 background-color: antiquewhite;
}

.div_back
{   border-radius: 5px;
    background-color: #f2f2f2;
    filter: blur(2px);
    z-index: -1;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
}
.container{
    position:relative;
    padding: 20px; 
}

<div class='container'>
<div class="div_back">
   
</div>
<div class="div_front">
   <form>
     <label for="username"></label>
     <input type="text" id="username" name="username" style="text-align:center" placeholder="username">
     <label for="password"></label>
     <input type="text" id="password" name="password"  style="text-align:center" placeholder="password">     
     <input type="submit" value="Sign In"> 
     <div style="display:flex; padding:0px;">
     <input type="submit_reset" value="Forgot password?" style="margin-right:5px;">
     <input type="submit_signup" value="Sign Up">
     </div>
    </form>
   </div>  
  </div>

How can I blur div tag and edit index?

1 Answers1