title: Chrome: foreign object always appears on top
body: <p>I've faced with some problem trying to add foreign object to svg.
  In Google Chrome foreign object is always displayed on top layer of svg despite the order of elements within svg.</p>
  
  <p>There is my <a href="https://jsfiddle.net/ttfpyf6x/" rel="nofollow noreferrer">fiddle</a> example</p>
  
  <pre><code>&lt;svg width='400' height='400'&gt;
    &lt;rect x="0" y="0" width="400" height="400" fill='orange'&gt;&lt;/rect&gt;
    &lt;foreignObject&gt;
      &lt;div class='text-container'&gt;
        &lt;div class='text-title'&gt;
          TITLE
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/foreignObject&gt;
    &lt;rect x="150" y="190" width="100" height="20" fill='red'&gt;&lt;/rect&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Since the "title" could be placed dynamically within svg-canvas, it's important that the div contained text has <code>position: absolute</code>.</p>
  
  <p>In FF and IE it displays correctly (by saying correctly I mean that red rectangle overlays word "title").</p>
  
  <p>I know it's possible to display text via <code>&lt;text&gt;</code> of svg and it would be showed correctly in all browsers, but the main problem with <code>&lt;text&gt;</code> is its slow rendering (in case of hundred text elements).
  So I'm looking for solution with foreign object particularly (or possibility to speed up <code>&lt;text&gt;</code>).</p>
  
  <p><a href="https://i.stack.imgur.com/koCuQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/koCuQ.png" alt="Chrome (incorrect as I guess) "></a>
  <a href="https://i.stack.imgur.com/rGcw4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rGcw4.png" alt="Firefox (correct)"></a></p>
  
  <p>Left image - Chrome (incorrect), right image - firefox (the behavior i'm trying to get)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text-container {
    position: relative;
  }
  
  .text-title {
    position: absolute;
    width: 100px;
    height: 20px;
    line-height: 20px;
    top: 190px;
    left: 150px;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width='400' height='400'&gt;
    &lt;rect x="0" y="0" width="400" height="400" fill='orange'&gt;&lt;/rect&gt;
    &lt;foreignObject&gt;
      &lt;div class='text-container'&gt;
        &lt;div class='text-title'&gt;
          TITLE
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/foreignObject&gt;
    &lt;rect x="150" y="190" width="100" height="20" fill='red'&gt;&lt;/rect&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>