Reputation: 4701
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.
<!-- start js control-->
<div style="position:relative;">
<div style="position:absolute;">
asdf
</div>
<div style="position:absolute;">
asdf2222
</div>
</div>
<!--rest of web page-->
<div>
here is content
</div>
https://jsfiddle.net/5zpz4eys/
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.
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:
asdf
asf222
here is content
Or, I expect to see 2 lines, where asdf and asdf22 are actually overlayed.
How can I do this?
Upvotes: 2
Views: 206
Reputation: 630
Use relative positioning for the inner divs, wrap them in an absolute/fixed positioned div.
Upvotes: 1