title: Clip-path using inline SVG clipping wrong elements when position:absolute
body: <p>This is a little hard to explain, so here's a <a href="http://jsfiddle.net/u4wSh/" rel="nofollow">jsFiddle</a> to show what I mean.</p>
  
  <pre><code>&lt;style&gt;
      .clip {
          clip-path: url(#clippath);
          -o-clip-path: url(#clippath);
          -moz-clip-path: url(#clippath);
          -webkit-clip-path: url(#clippath);
      }
  &lt;/style&gt;
  
  &lt;div id="container"&gt;
      &lt;svg&gt;
          &lt;defs&gt;
              &lt;clippath id="clippath"&gt;
                  &lt;rect x="0" y="0" width="50" height="320" /&gt;
              &lt;/clippath&gt;
          &lt;/defs&gt;
      &lt;/svg&gt;
  
      &lt;div id="d1"&gt;Bottom&lt;/div&gt;
      &lt;div id="d2" class="clip"&gt;Middle&lt;/div&gt;
      &lt;div id="d3"&gt;Top&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that I want to apply a clip-path to an absolutely positioned element, however I am finding that all other absolutely positioned elements which appear after it in the DOM will be clipped too. This isn't the case with relatively positioned elements, oddly.</p>
  
  <p>How can I make sure that only the desired element is clipped? I can't see anything wrong with my code. Is this a bug?</p>