title: How do I hide the underlying text of a div without background color?
body: <p>I'm trying to overlay two <code>div</code> elements, the underlying has a background the overlaying can not have one, since later there will be a background image in the back.<br/>
  I want the underlying text to be cut off at the place where it is behind the overlaying <code>div</code>.<br/>
  The only way I found was to set <code>background-color: white;</code> to the overlaying <code>div</code>, as mentioned this is not possible.<br/>
  Any tip/solution how do I accomplish this?<br/></p>
  
  <pre><code>&lt;div style="background-color:red;z-index:1;overflow:hidden;position:absolute;left:262px;top:222px;width:191px;height:48px;"&gt;
  This is a TEST text.
  &lt;/div&gt;
  &lt;div style="border:1px solid black;z-index:2;overflow:hidden;position:absolute;left:152px;top:177px;width:199px;height:156px;"&gt;
  Top Element
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Qv9K9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qv9K9.png" alt="overlaying divs"></a></p>