How to make content appear under absolute position
<p>I have a web page, all works as expected. I've been giving a "control" (based upon javascript) but it won't work even with the HTML and CSS! So to keep this to the point, I've left the JavaScript out of the question.</p>

<pre><code>&lt;!-- start js control--&gt;
&lt;div style="position:relative;"&gt;
&lt;div style="position:absolute;"&gt;
asdf
&lt;/div&gt;
&lt;div style="position:absolute;"&gt;
asdf2222
&lt;/div&gt;
&lt;/div&gt;

&lt;!--rest of web page--&gt;
&lt;div&gt;
here is content
&lt;/div&gt;
</code></pre>

<p><a href="https://jsfiddle.net/5zpz4eys/" rel="nofollow">https://jsfiddle.net/5zpz4eys/</a></p>

<p>As you can see in the fiddle, the issue is the text overlaps. I think it's because the absolute doesn't have a height although within the relative position outer div.</p>

<p>In the fiddle, I've left off most of the actual CSS as I want to understand it at this level. What CSS do I need to add... What I expect to see is 3 lines:</p>

<pre><code>asdf
asf222
here is content
</code></pre>

<p>Or, I expect to see 2 lines, where asdf and asdf22 are actually overlayed.</p>

<p>How can I do this?</p>