How to fix CSS for tabs?

Question

css

Combined the output of comments original / facebook / vkontakte in 3 tabs.
Tabs without js, only css.
The problem is that they are displayed "above the content of the page", that is, they fit on the footer.
It's not about z-index. I can't figure out how to fix it.
Tell me :)
UPD . I rewrote css, now it's like codepen .

Answer 1

Completely rewrote CSS and updated the question

Answer 2

The point is position: absolute; at tab-content

Answer 3

You need to remove tabs from ul>li and remove position: absolute from tabs;
Should look something like this

<ul>
<li>ВК</li>
<li>FB</li>
<li>Email</li>
</ul>
<div>
<div id="tab-content1"></div>
<div id="tab-content2"></div>
<div id="tab-content3"></div>
</div>