CODEWITHSUNDEEP
htmlcss
MyDaftQuestions
MyDaftQuestions

Reputation: 4701

How to make content appear under absolute position

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

Answers (1)

rsn
rsn

Reputation: 630

Use relative positioning for the inner divs, wrap them in an absolute/fixed positioned div.

Upvotes: 1

Related Questions