title: Using css mix-blend-mode with a child of a position fixed element
body: <p>I would like to set the mix blend mode of an anchor inside of a <code>position:fixed</code> element but it is not applied.</p>
  
  <p>If I apply the mix blend mode to the parent element it works or if I set the parent element to <code>position:absolute</code> it also works but neither of these are what I'm wanting to achieve.</p>
  
  <p>Codepen with the three examples, I'd like #nav to look like #nav2 and #nav3 with the existing html.</p>
  
  <p><a href="http://codepen.io/wesdeboer/pen/QjawYv" rel="noreferrer">http://codepen.io/wesdeboer/pen/QjawYv</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="nav"&gt;
      &lt;a href=""&gt;fixed&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="nav2"&gt;
      &lt;a href=""&gt;absolute&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="nav3"&gt;
      &lt;a href=""&gt;parent&lt;/a&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body { background: url(http://lorempixel.com/400/200)}
  #nav {
    position: fixed;
    top:0;
    left: 0;
  }
  #nav2 {
    position: absolute;
    top:0;
    left: 100px;
  }
  #nav3 {
    position: fixed;
    top: 0;
    left: 250px;
    mix-blend-mode: difference;
  }
  a {
    color: white;
    font-weight: bold;
    font-size: 32px;
    mix-blend-mode: difference;
  }
  </code></pre>
  
  <p>Tested in Chrome 45</p>