Как поправить CSS для табов?

Question

[Roman]

Совместил вывод комментариев оригинальные/facebook/вконтакте в 3 вкладки.
Табы без js, только css.
Проблема в том, что они отображаются "над контентом страницы", то есть налазят на footer.
Дело вроде не в z-index. Не могу сообразить как исправить.
Подскажите :)

UPD. Переписал заново css, теперь так codepen.

Answer 1

[Roman]

Полностью переписал CSS и обновил вопрос

Answer 2

[vasilseodor]

Дело в position: absolute; у tab-content

Answer 3

[Dzham]

Вам нужно вынести табы из ul>li и убрать у табов position: absolute;
Выглядеть должно примерно так

<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>