title: how to force an element to the top when z-index is not working?
body: <p>I am writing a chrome extension which using injection to modify the element in target webpage.
  I want to show a message bubble when cursor move on an element. But I encounter a problem that sometimes the message bubble is hidden by some other elements. I found that it was because z-index will not work if  an element B sits on top of element A, a child element of element A(message bubble) can never be higher than element B. </p>
  
  <p>To demonstrate it,Here is an example. That obj2 will always be hidden by obj3, although obj2's z-index is 1000000.</p>
  
  <p>Is there any solutions for it? </p>
  
  <pre><code>.aaa{
      background-color:blue;
      width:100px;
      height:100px;
  }
  .ccc{
      background-color:red;
      width:80px;
      height:80px;
      z-index:1000000;
  }
  .bbb{
      background-color:green;
      position:relative;
      top:-50px;
      left:50px;
      width:100px;
      height:100px;
  }
  </code></pre>
  
  
  
  <pre><code>&lt;div&gt;
      &lt;section id=obj1 class="aaa"&gt;
      &lt;article id=obj2 class="ccc"&gt;
      &lt;/article&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  &lt;section id=obj3 class="bbb"&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/UreK3.png" alt="enter image description here"></p>