title: Blur content behind a div using CSS3
body: <p>I've encountered a problem with applying blur to the background of absolute/fixed elements, as it does not seem to blur the main content of the page, only the content of the absolute element itself. I currently have the styling for my alert as following:</p>
  
  <pre><code>.alert-wrap {
      position: fixed;
      z-index: 10;
      right: 0;
      bottom: 0;
  }
  
  .alert-wrap .alert {
      display: block;
      background-color: rgba(215, 44, 44, 0.5);
      margin: 0 15px 15px 0;
      position: relative;
  }
  
  .alert-wrap .alert:before {
      content: "";
  
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
  
      -webkit-filter: blur(10px);
      -moz-filter: blur(10px);
      -o-filter: blur(10px);
      -ms-filter: blur(10px);
      filter: blur(10px);
  
  }
  </code></pre>
  
  <p>I'm looking to have this blur the background of the alert element, making the main content behind it seem blurred (applying more focus on the element itself), but have not managed to find anything even confirming this issue exists at all.</p>
  
  <p>HTML document flow is as follows:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;!-- Header Stuff Deleted --&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class='alert-wrap'&gt;
              &lt;div class='alert'&gt;
                  &lt;div class='head'&gt;
                      Notifications
                  &lt;/div&gt;
                  &lt;div class='body'&gt;
                      Alert content here
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;?php
              //constructing navbar
          ?&gt;
  
          &lt;div class='content'&gt;
              Some content here
          &lt;/div&gt;
  
          &lt;?php
              //constructing footer
          ?&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Image example:</p>
  
  <p><img src="https://i.imgur.com/rJIb4BM.png" alt="example"></p>